首先:编辑一个简单的templete
<div id="popLayer">
</div>
<div id="popBox">
<div class="close">
<a href="javascript:void(0)" onclick="closeBox()">关闭</a>
</div>
<div class="content">我弹出来了</div>
</div>
下面时两个层的css
/*背景层*/
#popLayer {
display: none;
background-color: #B3B3B3;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);/* 只支持IE6、7、8、9 */
}
/*弹出层,在背景层的上面座椅z-index只要比背景层的z-index大即可*/
#popBox {
display: none;
background-color: #FFFFFF;
z-index: 11;
width: 200px;
height: 200px;
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
}
//关闭按钮的样式
#popBox .close{
text-align: right;
margin-right: 5px;
background-color: #F8F8F8;
}
/*关闭按钮*/
#popBox .close a {
text-decoration: none;
color: #2D2C3B;
}
只是一个简单的实例,样式也没有做过多的修饰,大家要是想要比较漂亮的可以代替alert的弹层,推荐一个链接:
//好看的代替alert的弹出层:
https://sweetalert.js.org/guides/