本文收錄於你其實不用javascript系列，範例原始碼皆收錄於CssTrick
現在網頁設計都盡量以不整頁刷新為原則，也因此許多操作會在同一頁進行，這時候視窗就相當好用，以往都是使用javascript來完成modal, dialog, popup, lightbox這類的功能，不說不知道，其實用CSS也能達到相同的效果，來看看線上展示吧
以下介紹關鍵部分，完整的原始碼請參考 Modal.html
#myToggledUI {
display: none;
}
#myToggle:checked ~ #myToggledUI {
display: block;
}
<label for="toggleControl" style="cursor: pointer;">Click Me</label>
<input type="checkbox" id="toggleControl" style="display: none;">
<div id="toggleMe"
style="border: 1px solid black; margin: 10px; padding: 10px;">
Look mom, no JavaScript!
</div>
主要是利用label當成按鈕，設置for屬性，連動隱藏的checkbox，再利用CSS的選擇器，對應checked屬性，以及波浪號~將#toggleMe顯示/隱藏
究竟波浪號~是什麼作用呢，主要是同一層後面所有的元素，例如:
div ~ p { color: red; }
<div>
<p>1</p>
<div>2</div>
<p>3(red)</p>
<p>4(red)</p>
</div>
可以選到div後同一層所有的p元素，3和4就會是紅色的，利用這個特性，把開啟視窗和關閉視窗的按鈕，用label標籤，甚至背景的overlay也是，還可以做到點擊背景就關閉視窗，Modal.html就是這樣做的，是不是很聰明呢
使用情境很廣泛，包含對話視窗，需要toggle的內容都可以
參考來源
木澤的研發腦 