知識點
- a 標(biāo)簽點擊改變頁面鏈接中的 hash 部分。
-
:target選擇器可以選中和頁面 hash 相同的標(biāo)簽（標(biāo)簽的 id 和頁面 hash 相同）。
代碼實現(xiàn)
先在頁面中定義彈窗 id="modal" 以關(guān)聯(lián) hash。
添加打開彈窗的按鈕，a 標(biāo)簽，鏈接地址是彈窗的 id。
<a href="#modal">open modal</a>
<div id="modal">
<h1>modal</h1>
</div>
在彈窗上添加樣式 class="modal"，在彈窗里面添加關(guān)閉按鈕 <a href="#">close</a>。
<div class="modal" id="modal">
<h1>modal</h1>
<a href="#">close</a>
</div>
在 css 中默認(rèn)隱藏彈窗，同時設(shè)置彈窗的基礎(chǔ)樣式。
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
}
在 css 中添加 :target 選擇器，讓 hash 值和彈窗的 id 相同時，彈窗可以展示出來。
.modal:target {
display: block;
}
