css部分
<style>
.close {
position: absolute;
display: inline-block;
width: 30px;
height: 30px;
overflow: hidden;
top: 5px;
right: 5px;
}
.close::before, .close::after {
content: '';
position: absolute;
height: 2px;
width: 100%;
top: 50%;
left: 0;
margin-top: -1px;
background: #000;
}
.close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.close.thick::before, .close.thick::after {
height: 4px;
margin-top: -2px;
}
.close:hover::before, .close:hover::after {
background: #1ebcc5;
}
</style>
HTML部分
<div id="demo" class="top" style="padding:35px 35px 0;overflow:auto;width:60%;height:500px;background-color:rgba(240,240,240,1);position:fixed;margin:0 auto;
left:20%;top:100px;border-radius:5px;z-index:9999;display:none;">
<div style="position:absolute;top:10px;font-size:16px;font-weight:900">标题</div>
<div>
<span class="close thick" id='bt'></span>
</div>
<div style="position:absolute;left:0px;width:100%;background-color:rgb(255,255,255);">
<br>
<div style="text-align:center;vertical-align:middle;top: 80%;position: relative;">
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" type="button" id="bt1" lay-submit lay-filter="login" align="right" >关闭</button>
</div>
</div>
js部分
//关闭
var obt1 = document.getElementById("bt1");
obt1.onclick = function () {
document.getElementById("demo").style.display="none";
}
var obt = document.getElementById("bt");
obt.onclick = function () {
document.getElementById("demo").style.display="none";
}