jQuery点击按钮弹出遮罩层且内容居中特效
40 浏览量
2020-11-23
07:01:43
上传
评论 1
收藏 80KB PDF 举报
jQuery点击按钮弹出遮罩层且内容居中特效点击按钮弹出遮罩层且内容居中特效
本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效，下面来看最终实现的效果：
由于是测试的程序，所以我未加关闭的按钮。
一、主体程序一、主体程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>弹出居中遮罩</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
</head>
<body>
<section class="test">
这里是主体内容<br />
<input type="button" class="testButton" value="弹出遮罩" />
</section>
<section class="testBg">
<section class="testCont">
这里是弹出的内容测试
</section>
</section>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/layout.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
二、二、CSS样式样式
*{
margin: 0;
padding: 0;
}
.testBg{
position: absolute;
top: 0;
background-color: #000;
filter:alpha(opacity=80); /* IE */
-moz-opacity:0.8; /* Moz + FF */
opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/
display:none ;
}
.testBg .testCont{
position: absolute;
top: 0;
left: 0;
width:200px;
border: 1px #ffc700 solid;
color: #ffc700;
评论0
最新资源