インテリジェントポイント

aラベルページリンクのhash部分を変更するには、をクリックします.

:targetセレクタは、ページhashと同じラベル(ラベルのidとページhashと同じ)を選択できます.

コード実装

まず、hashを関連付けるために、ページに弾窓id="modal"を定義する.
弾窓を開くボタンを追加します.aラベル、リンク先は弾窓のidです.

open modal

    
modal

弾窓にスタイルclass="modal"を追加し、弾窓に閉じるボタンcloseを追加します.

    
modal
    close

cssでは、弾窓をデフォルトで非表示にし、弾窓のベーススタイルを設定します.

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
}

cssに:targetセレクタを追加し,hash値と弾窓のid相を同時に弾窓を示すことができるようにした.

.modal:target {
    display: block;
}

リファレンスリンク

オンライン例

Light-Modal