jQuery点击遮罩弹出层固定居中
最后更新于:2022-04-01 23:50:01
[TOC]
# jQuery点击遮罩弹出层固定居中
## html代码
~~~
jQuery点击遮罩弹出层固定居中代码 - 站长素材
~~~
## css代码
~~~
@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/*按钮样式*/
#ClickMe {
width: 200px;
height: 30px;
border: 1px solid #C40000;
background-color: #000;
color: #FFF;
margin:0 auto;
}
#goodcover {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 133%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: 0.50;
filter: alpha(opacity=80);
}
#code {
width: 300px;
height: 500px;
background-color: #fff;
padding: 10px;
position: absolute;
display: none;
left: 45%;
z-index: 1002;
}
.close1 {
width: 300px;
height: 60px;
}
#closebt {
float: right;
}
#closebt img {
width: 20px;
}
.goodtxt {
text-align: center;
}
.goodtxt p {
height: 30px;
line-height: 30px;
font-size: 16px;
color: #000;
font-weight: 600;
}
.code-img {
width: 250px;
margin: 30px auto 0 auto;
padding: 10px;
}
.code-img img {
width: 240px;
}
~~~
效果如:
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/4374cbdcd9b1b89b852da71a9fb19b13_1899x952.png)
';
适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
来源:站长素材