一般比較好看的彈出框都會用到JS，如果只是需要功能，CSS也能實(shí)現(xiàn)一個(gè)彈出框。接下來看看，怎么實(shí)現(xiàn)純CSS的彈出框這一功能吧
一般比較好看的彈出框都會用到JS，如果只是需要功能，CSS也能實(shí)現(xiàn)一個(gè)彈出框。接下來看看，怎么實(shí)現(xiàn)純CSS的彈出框這一功能吧。
- 代碼來源：詳情
- 效果演示：頁底
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>純css實(shí)現(xiàn)彈窗</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif
}
.button {
background: bisque;
color: #fff;
padding: 10px 25px;
}
.modal>input {
display: none;
}
.modal>input~* {
overflow: hidden;
max-height: 0;
opacity: 0
}
.modal .overlay {
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
margin: 0;
border-radius: 0;
background: rgba(17, 17, 17, 0.6);
transition: all 0.3s;
z-index: 100000;
}
.modal .overlay~* {
border: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%) scale(0.2, 0.2);
z-index: 1000000;
transition: all .3s ease;
}
.main {
background: #fff;
padding: 10px;
}
.modal>input:checked~* {
display: block;
opacity: 1;
max-height: 10000px;
}
.modal>input:checked~.overlay~* {
max-height: 90%;
overflow: auto;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1, 1);
transform: translateX(-50%) translateY(-50%) scale(1, 1);
}
</style>
</head>
<body>
<label for="modal_1" class="button">顯示模態(tài)框</label>
<div class="modal">
<input type="checkbox" name="" id="modal_1">
<label for="modal_1" class="overlay"></label>
<div class="main">
<p>
We have a special offer for you. I am sure you will love it! However this does look spammy...
</p>
</div>
</div>
</body>
</html>