[CSS]互動式視窗

本文收錄於你其實不用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的內容都可以

參考來源

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

Create a website or blog at WordPress.com

向上 ↑

%d 位部落客按了讚: