在網(wǎng)頁中我們經(jīng)常會用到模態(tài)框篙挽，一般會用于顯示表單或者是提示信息荆萤。由于模態(tài)框涉及到頁面上比較多的交互效果，最簡單的交互就是打開以及關(guān)閉兩個(gè)操作铣卡，而關(guān)閉又會涉及是否需要在打開狀態(tài)下點(diǎn)擊模態(tài)框外部能夠關(guān)閉這樣的功能链韭，因?yàn)檫@些交互問題，所以一般都會首先考慮到使用JavaScript實(shí)現(xiàn)煮落。但是我們也可以使用純CSS來實(shí)現(xiàn)敞峭。
實(shí)現(xiàn)思路：
使用HTML中checkbox類型的input標(biāo)簽
使用label來切換checkbox的選中狀態(tài)
使用css中的:checked偽類選擇器根據(jù)checkbox是否被選中切換頁面元素的樣式
使用css的屬性選擇器來添加多功能開關(guān)
開始實(shí)現(xiàn)：
首先我們先寫出基本結(jié)構(gòu)
HTML
<div id="modal" class="modal__wrapper">
<div class="modal">
<div class="modal__main">
<p> 模態(tài)框內(nèi)容 </p>
</div>
</div>
</div>
CSS:
.modal {
width: 50%;
height: 50vh;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
background: #ffffff;
}
.modal__body {
padding: 3rem 1rem;
}
.modal-overlay {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
padding: 0;
background-color: rgba(43, 46, 56, 0.9);
z-index: 1;
}
現(xiàn)在我們能夠看到模態(tài)主體部分以及背景蒙版的樣式了。
接下來讓我們給這個(gè)模態(tài)框添加開關(guān)
將HTML改為:
<div id="modal" class="modal__wrapper">
<input id="modal__state" class="modal__state" type="checkbox">
<label class="modal__toggle modal__toggle--outside" for="modal__state">打開模態(tài)框</label>
<div class="modal">
<div class="modal__body">
<p> 模態(tài)框內(nèi) </p>
</div>
</div>
<div class="modal-overlay"></div>
</div>
將模態(tài)框的初始狀態(tài)改為隱藏蝉仇，并在checkbox選中時(shí)顯示
.modal {
width: 50%;
height: 50vh;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
background: #ffffff;
display: none;
}
.modal__body {
padding: 3rem 1rem;
}
.modal-overlay {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
padding: 0;
background-color: rgba(43, 46, 56, 0.9);
z-index: 1;
display: none;
}
.modal__state:checked + label{
display: none;
}
.modal__state:checked + label + .modal,
.modal__state:checked + label + .modal + .modal-overlay{
display: block;
}
目前我們可以實(shí)現(xiàn)點(diǎn)擊復(fù)選框打開模態(tài)框了旋讹，但是打開之后我們關(guān)閉不了殖蚕，所以我們需要讓打開的彈框可以關(guān)閉，接下來只需要做一件事情沉迹，就是在打開的模態(tài)框中再添加一個(gè)label睦疫，如：
HTML
<div id="modal" class="modal__wrapper">
<input id="modal__state" class="modal__state" type="checkbox">
<label class="modal__toggle modal__toggle--outside" for="modal__state">打開模態(tài)框</label>
<div class="modal">
<div class="modal__body">
<label class="modal__toggle modal__toggle--outside" for="modal__state">關(guān)閉模態(tài)框</label>
<p> 模態(tài)框內(nèi) </p>
</div>
</div>
<div class="modal-overlay"></div>
</div>
這樣基本的打開以及關(guān)閉模態(tài)框的交互就完成了，讓我們再簡單優(yōu)化一下樣式鞭呕，使其看起來至少美觀一些
CSS
.modal {
width: 50%;
height: 50vh;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
background: #fff;
display: none;
}
.modal__body {
padding: 3rem 1rem;
}
.modal-overlay {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
padding: 0;
background-color: rgba(43, 46, 56, 0.9);
z-index: 1;
display: none;
}
.modal__state:checked + label{
display: none;
}
.modal__state:checked + label + .modal,
.modal__state:checked + label + .modal + .modal-overlay{
display: block;
}
.modal__state{
position: fixed;
top: -9999px;
}
.modal__wrapper .modal__toggle {
padding: 1rem;
display: inline-block;
margin-top: -1rem;
margin-right: -1rem;
color: black;
}
.modal__wrapper .modal__toggle--outside {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: 1rem;
background: #df2f2f;
cursor: pointer;
}
.modal__wrapper .modal__toggle--inside {
float: right;
font-size: 4rem;
width: 2rem;
height: 2rem;
text-align: center;
cursor: pointer;
transition: 0.15s;
margin-top: -3.5rem;
margin-right: -2rem;
}
現(xiàn)在我們的模態(tài)框看起來就美觀多了
目前已經(jīng)實(shí)現(xiàn)了打開和關(guān)閉的切換蛤育，那么如何實(shí)現(xiàn)點(diǎn)擊模塊框外面關(guān)閉模態(tài)框呢？可能這部分看起來比較復(fù)雜一些葫松，但是其實(shí)也非常的簡單瓦糕。默認(rèn)狀態(tài)下我們顯示的是由一個(gè)DIV實(shí)現(xiàn)的蒙層，但是如果我們將DIV也換成一個(gè)label呢腋么？那應(yīng)該就跟關(guān)閉按鈕的邏輯一樣了咕娄。
另外，為了使得我們的模塊框能夠適應(yīng)點(diǎn)擊模塊框外部關(guān)閉或者不關(guān)閉兩種情況珊擂，我們還可以利用css的屬性選擇器來實(shí)現(xiàn)功能的開關(guān)圣勒。下面是我們最終的html和css。
HTML
<div id="modal" class="modal__wrapper" outside-close>
<input id="modal__state" class="modal__state" type="checkbox">
<label class="modal__toggle modal__toggle--outside" for="modal__state">打開模態(tài)框</label>
<div class="modal">
<div class="modal__body">
<label class="modal__toggle modal__toggle--outside" for="modal__state">關(guān)閉模態(tài)框</label>
<p> 模態(tài)框內(nèi) </p>
</div>
</div>
<div class="modal-overlay"></div>
</div>
CSS樣式
.modal {
width: 50%;
height: 50vh;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
background: #fff;
display: none;
}
.modal__body {
padding: 3rem 1rem;
}
.modal-overlay {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
padding: 0;
background-color: rgba(43, 46, 56, 0.9);
z-index: 1;
display: none;
}
.modal__state:checked + label{
display: none;
}
.modal__state:checked + label + .modal,
.modal__state:checked + label + .modal + .modal-overlay{
display: block;
}
.modal__state{
position: fixed;
top: -9999px;
}
.modal__wrapper .modal__toggle {
padding: 1rem;
display: inline-block;
margin-top: -1rem;
margin-right: -1rem;
color: black;
}
.modal__wrapper .modal__toggle--outside {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: 1rem;
background: #df2f2f;
cursor: pointer;
}
.modal__wrapper .modal__toggle--inside {
float: right;
font-size: 4rem;
width: 2rem;
height: 2rem;
text-align: center;
cursor: pointer;
transition: 0.15s;
margin-top: -3.5rem;
margin-right: -2rem;
}
.modal__wrapper[outside-close] .modal__state:checked + label + .modal + .modal-overlay {
display: none;
}
.modal__wrapper[outside-close] .modal__state:checked + label.modal__toggle--outside{
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
padding: 0;
background-color: rgba(43, 46, 56, 0.9);
z-index: 1;
display: block;
transform: translate(0, 0);
margin-top: 0;
color: transparent;
}
現(xiàn)在的這種實(shí)現(xiàn)目前只適用于頁面上只有一個(gè)模態(tài)框的情況未玻，如果需要實(shí)現(xiàn)多個(gè)也是可能的灾而，只需要做幾個(gè)簡單的改動即可實(shí)現(xiàn)。
Demo 1: 單模態(tài)框?qū)崿F(xiàn)
Demo 2: 多模態(tài)框?qū)崿F(xiàn)
