HTML遮罩层，背景半透明，只显示中间部分

最新推荐文章于 2021-06-03 15:01:53 发布

WJN17214

最新推荐文章于 2021-06-03 15:01:53 发布

阅读量8.1k

点赞数

分类专栏： js

js 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML遮罩层，背景半透明，只显示中间部分</title>
<style>
#msgDiv {
z-index:10001;
width:500px;
height:400px;
background:white;
border:#336699 1px solid;
position:absolute;
left:50%;
top:20%;
font-size:12px;
margin-left:-225px;
display: none;
}
#bgDiv {
display: none;
position: absolute;
top: 0px;
left: 0px;
right:0px;
background-color: #777;
filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75);
opacity: 0.6;
}
</style>
<script type="text/javascript" language="javascript">
function showDetail(){//show detail
//msgDiv
var msgDiv = document.getElementById("msgDiv");
msgDiv.style.marginTop = -75 + document.documentElement.scrollTop + "px";
//bgDiv
var bgDiv = document.getElementById("bgDiv");
bgDiv.style.width = document.body.offsetwidth + "px";
bgDiv.style.height = screen.height + "px";
//msgShut
var msgShut = document.getElementById("msgShut");
msgShut.onclick = function(){
bgDiv.style.display = msgDiv.style.display = "none";
}
//content
msgDiv.style.display = bgDiv.style.display = "block";
var msgDetail = document.getElementById("msgDetail");
msgDetail.innerHTML = "<p style='line-height:50px;font-size:30px;text-align:center'>显示框中的内容</p>";
}
</script>
</head>

<body>
<div id="msgDiv">
<div id="msgShut">关闭</div>
<div id="msgDetail"></div>
</div>
<div id="bgDiv"></div> 

<p><a href="#" onClick="showDetail()">点击我看看</a></p>
</body>
</html>

WJN17214

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML遮罩层，背景半透明，只显示中间部分

HTML遮罩层，背景半透明，只显示中间部分#msgDiv { z-index:10001; width:500px; height:400px; background:white; border:#336699 1px solid; position:absolute; left:50%; top:20%;
复制链接

扫一扫

专栏目录