純CSSで弾窓を実現
1081 ワード
インテリジェントポイント
: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;
}