遮罩层固定于窗口中央,不会随滚动条滑动。
遮罩层实现:
<style type="text/css">
/*遮罩层 CSS*/
#close{
text-shadow: 0 1px 0 #fff;
opacity: .2;
filter: alpha(opacity=20);
width:30px;
height:30px;
cursor:pointer;
position:absolute;
right:5px;
top:15px;
color: #000;
font-size: 16px;
font-weight: 700;
}
.black_overlay{
/* display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80); */
background-color:#000;
opacity:0.8;
filter: alpha(opacity=80);
position:absolute;
left:0;
top:0;
z-index:1000;
}
.white_content {
display: none;
position:fixed;
width:450px;
background-color: white;
border-radius: 6px;
z-index:1002;
overflow: auto;
}
</style>
遮罩层JS:
/*遮罩 JS*/
function setLoginPosition(show_div,bg_div){
//获取页面的高度和宽度
var sWidth=document.body.scrollWidth;
var sHeight=document.body.scrollHeight;
//获取页面的可视区域高度和宽度
var wHeight=document.documentElement.clientHeight;
var wWidth=document.documentElement.clientWidth;
var oMask = window.document.getElementById(bg_div);
oMask.style.height=sHeight+"px";
oMask.style.width=sWidth+"px";
//获取登录框及其高度和宽度
var oLogin = window.document.getElementById(show_div);
var oHeight=oLogin.offsetHeight;
var oWidth=oLogin.offsetWidth;
//设置登录框的left和top
oLogin.style.left=sWidth/2-oWidth/2+"px";
oLogin.style.top=wHeight/2-oHeight/2+"px";
}
function ShowDiv(show_div,bg_div){
document.getElementById(show_div).style.display="block";
document.getElementById(bg_div).style.display="block";
setLoginPosition(show_div,bg_div);
// var bgdiv = document.getElementById(bg_div);
// bgdiv.style.width = document.body.scrollWidth;
// // bgdiv.style.height = $(document).height();
// $("#"+bg_div).height($(document).height());
// };
}
function Close(){
function CloseDiv()
{
var show_div = document.getElementById("MyDiv");
var bg_div = document.getElementById("fade");
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};
return false;
}
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};
$("#loginbtn").on('click', function () {
var txtName = $("#name").val();
var txttags = $("#tags").val();
if (trim(txtName) == "") {
alert("用户名或密码为空");
}
else {
alert("dd");
}
});
HTML:
<!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>
<style type="text/css">
/*遮罩层 CSS*/
#close{
text-shadow: 0 1px 0 #fff;
opacity: .2;
filter: alpha(opacity=20);
width:30px;
height:30px;
cursor:pointer;
position:absolute;
right:5px;
top:15px;
color: #000;
font-size: 16px;
font-weight: 700;
}
.black_overlay{
/* display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80); */
background-color:#000;
opacity:0.8;
filter: alpha(opacity=80);
position:absolute;
left:0;
top:0;
z-index:1000;
}
.white_content {
display: none;
position:fixed;
width:450px;
background-color: white;
border-radius: 6px;
z-index:1002;
overflow: auto;
}
</style>
<script language="javascript" type="text/javascript">
/*遮罩 JS*/
function setLoginPosition(show_div,bg_div){
//获取页面的高度和宽度
var sWidth=document.body.scrollWidth;
var sHeight=document.body.scrollHeight;
//获取页面的可视区域高度和宽度
var wHeight=document.documentElement.clientHeight;
var wWidth=document.documentElement.clientWidth;
var oMask = window.document.getElementById(bg_div);
oMask.style.height=sHeight+"px";
oMask.style.width=sWidth+"px";
//获取登录框及其高度和宽度
var oLogin = window.document.getElementById(show_div);
var oHeight=oLogin.offsetHeight;
var oWidth=oLogin.offsetWidth;
//设置登录框的left和top
oLogin.style.left=sWidth/2-oWidth/2+"px";
oLogin.style.top=wHeight/2-oHeight/2+"px";
}
function ShowDiv(show_div,bg_div){
document.getElementById(show_div).style.display="block";
document.getElementById(bg_div).style.display="block";
setLoginPosition(show_div,bg_div);
// var bgdiv = document.getElementById(bg_div);
// bgdiv.style.width = document.body.scrollWidth;
// // bgdiv.style.height = $(document).height();
// $("#"+bg_div).height($(document).height());
// };
}
function Close(){
function CloseDiv()
{
var show_div = document.getElementById("MyDiv");
var bg_div = document.getElementById("fade");
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};
return false;
}
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};
$("#loginbtn").on('click', function () {
var txtName = $("#name").val();
var txttags = $("#tags").val();
if (trim(txtName) == "") {
alert("用户名或密码为空");
}
else {
alert("dd");
}
});
</script>
</head>
<body>
<p ><span onclick="ShowDiv('MyDiv','fade')">添加资源</span></p>
<div id="fade" class="black_overlay"></div>
<div id="MyDiv" class="white_content" >
<form class="elegant-aero" id="itemForm" method="post" action="${config.basePath}/assets/add.html" enctype="multipart/form-data">
<h1>添加资源<span id="close" onclick="CloseDiv('MyDiv','fade')">X</span></h1>
<label>
<span>资源名称 :</span>
<input type="text" name="name" id="name" placeholder="请输入资源名称"/>
</label>
</form>
</div>
</body>
</html>
这样就可以实现了,详细的注解,稍后有时间再补