一款简单实用的纯CSS模态窗特效,没有引入任何javascript,窗口的大小、颜色、背景色、按钮等都可以自由调整,关闭后可以通过点击按钮来触发显示。
页面的head部分的样式主要是两部分,一个是触发按钮的样式,另一是模态窗的样式,代码如下:
html, body {
height: 100%;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
background-color: #FAFAFB;
color: slategrey;
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
a.button {
text-decoration: none;
text-align: center;
text-shadow: 0 1px 0 #fff;
color: #00a2ff;
font-weight: 500;
padding: 8px 15px 8px 15px;
border: 1px solid rgba(26, 53, 71, 0.1);
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
transition: .25s;
background: linear-gradient(white, ghostwhite);
}
a.button:hover {
border: 1px solid rgba(26, 53, 71, 0.2);
background: white;
}
.wrapper {
width: 600px;
height: 100%;
margin: auto;
text-align: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity .5s;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.modal {
width: 80%;
position: relative;
margin: auto;
padding: 1.5rem;
background: #fff;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
transition: .5s;
opacity: 0;
}
.modal .content {
margin-top: 1rem;
text-align: justify;
}
.modal .content a {
max-width: 60%;
margin: auto;
display: block;
}
.overlay:target > .modal {
transform: translateY(30%) scale(0.9);
transition-timing-function: cubic-bezier(0.8, 0, 0, 1.5);
opacity: 1;
}
h2 {
text-align: center;
margin-top: 2rem;
color: #00a2ff;
}
a.close {
position: absolute;
top: 15px;
right: 13px;
width: 24px;
height: 24px;
text-decoration: none;
text-align: center;
font-size: 24px;
line-height: 22px;
color: lightslategrey;
background-color: lightgrey;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
transition: .25s;
}
a.close:hover {
background-color: tomato;
color: white;
}
页面的body部分跟样式类型,也是分成两个部分的,一个是按钮容器,一个是模态窗的容器,都很容易看懂的,代码如下:
<div class="wrapper">
<a class="button" href="#pop">纯CSS模态窗</a>
</div>
<div id="pop" class="overlay">
<div class="modal">
<h2>吸引力法则</h2>
<a class="close" href="#">×</a>
<div class="content">
第二步是信念。<br/><br/>
你要相信你已经拥有它了。要有一种<strong>毫不动摇的信念,</strong>就是我的说法。<br/><br/>
要相信还没有实现的事,“你的愿望就是我的命令”。<br/><br/>
宇宙就会开始运作安排,从而满足你心中的愿望。<br/><br/>
<br/><a class="button" href="#">关闭</a><br/>
</div>
</div>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791