开发笔记之遮罩弹层
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了开发笔记之遮罩弹层相关的知识，希望对你有一定的参考价值。
近几日做一个项目，要有添加弹出表单页，所以总结一下个人认为可以提供大家学习和直接拿去用的代码功能，也可以就此修改使之更加完善，这几段代码非常简单，适合初学者来学习，相信能帮助到大家
<div id="overlay"></div> 最外层遮罩，遮盖全屏
/*overlay遮罩 css样式**/
#overlay {
background: #000;
filter: alpha(opacity=50); /* IE的透明度 */
opacity: 0.5; /* 透明度 */
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100; /* 此处的图层要大于页面 */
display:none;
}
<div id="show" style="display: none;">/*此处是弹层之上的表单层，这儿的代码就不贴了，各位自己写吧**/</div>
/*遮罩上表单层 css样式**/
#show{
position: absolute;
display: none;
width: 705px;
height: 632px;
top: 50%;
left:50%;
margin-left: -352.5px;
margin-top: -316px;
z-index: 200;
background-color: #f7f7f7;
}
/*JS部分 .s2是一个按钮，主要用来触发弹层的，在写的时候别忘了写一个按钮用来触发**/
/* 显示遮罩层 */
$(‘.s2‘).click(function showOverlay() {
$("#overlay").height(pageHeight());
$("#overlay").width(pageWidth());
$("#overlay").fadeTo(200, 0.5);
$(‘#show‘).css(‘display‘,‘block‘);
$(‘#overlay‘).bind("touchmove", function(e) {
e.preventDefault();
});
$(‘#show‘).bind("touchmove", function(e) {
e.preventDefault();
});
function hideOverlay() {
$("#overlay").fadeOut(200);
}
function pageHeight() {
return document.body.scrollHeight;
}
function pageWidth() {
return document.body.scrollWidth;
}
});
/*完整代码 弹层+表单层**/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style type="text/css">
#overlay {
background: #000;
filter: alpha(opacity=50);
/* IE的透明度 */
opacity: 0.5;
/* 透明度 */
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
/* 此处的图层要大于页面 */
display: none;
}
#show {
position: absolute;
display: none;
width: 705px;
height: 632px;
top: 50%;
left: 50%;
margin-left: -352.5px;
margin-top: -316px;
z-index: 200;
background-color: #f7f7f7;
}
</style>
<div id="show">
<input type="button" name="" id="yc" value="隐藏" />
</div>
<div id="overlay">
</div>
<input type="button" name="s2" id="s2" value="显示" />
<script type="text/javascript">
$(‘#s2‘).click(function showOverlay() {
$("#overlay").height(pageHeight());
$("#overlay").width(pageWidth());
$("#overlay").fadeTo(200, 0.5);
$(‘#show‘).css(‘display‘, ‘block‘);
$(‘#overlay‘).bind("touchmove", function(e) {
e.preventDefault();
});
$(‘#show‘).bind("touchmove", function(e) {
e.preventDefault();
});
function hideOverlay() {
$("#overlay").fadeOut(200);
}
function pageHeight() {
return document.body.scrollHeight;
}
function pageWidth() {
return document.body.scrollWidth;
}
});
$(‘#yc‘).click(function() {
$(‘#show‘).css(‘display‘, ‘none‘);
$(‘#overlay‘).css(‘display‘, ‘none‘);
});
</script>
</body>
</html>
以上是关于开发笔记之遮罩弹层的主要内容，如果未能解决你的问题，请参考以下文章