遮罩一：
1 <!DOCTYPE > 2 <html > 3 <head> 4 <title>DIV CSS遮罩层</title> 5 <script language="javascript" type="text/javascript"> 6 function showdiv() { 7 document.getElementById("bg").style.display ="block"; 8 document.getElementById("show").style.display ="block"; 9 } 10 function hidediv() { 11 document.getElementById("bg").style.display ='none'; 12 document.getElementById("show").style.display ='none'; 13 } 14 </script> 15 <style type="text/css"> 16 #bg { 17 display: none; 18 position: absolute; 19 top: 0%; 20 left: 0%; 21 width: 100%; 22 height: 100%; 23 background-color: black; 24 z-index: 1001; 25 -moz-opacity: 0.7; 26 opacity: .70; 27 filter: alpha(opacity=70); 28 } 29 30 #show { 31 display: none; 32 position: absolute; 33 top: 25%; 34 left: 22%; 35 width: 53%; 36 height: 49%; 37 padding: 8px; 38 border: 8px solid #E8E9F7; 39 background-color: white; 40 z-index: 1002; 41 overflow: auto; 42 } 43 </style> 44 </head> 45 <body> 46 <input id="btnshow" type="button" value="打开" onclick="showdiv();" /> 47 <div id="bg"></div> 48 <div id="show"> 49 内容测试 50 <input id="btnclose" type="button" value="关闭" onclick="hidediv();" /> 51 </div> 52 </body> 53 </html>
图片预览：
遮罩二：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title></title> 7 <meta charset="utf-8" /> 8 9 <script src="jquery-1.9.1.min.js"></script> 10 <link href="bootstrap.min.css" rel="stylesheet" /> 11 <script> 12 //显示框 13 function showdiv() { 14 document.getElementById("bg").style.display = "block"; 15 document.getElementById("show").style.display = "block"; 16 var height = document.documentElement.clientHeight; 17 $("#bg").height(height); 18 19 } 20 function hidediv() { 21 document.getElementById("bg").style.display = 'none'; 22 document.getElementById("show").style.display = 'none'; 23 } 24 $(function () { 25 $(".shangchuanbtn").on("click", function () { 26 showdiv(); 27 }) 28 }) 29 </script> 30 <style> 31 #bg { 32 display: none; 33 position: absolute; 34 top: 0%; 35 left: 0%; 36 width: 100%; 37 height:100%; 38 background-color: black; 39 z-index: 1001; 40 -moz-opacity: 0.7; 41 opacity: .70; 42 filter: alpha(opacity=70); 43 } 44 45 #show { 46 display: none; 47 position: fixed; 48 top:0;//改为bottom则在下面显示 49 left:0; 50 vertical-align:bottom; 51 width:100%; 52 text-align:center; 53 background-color: white; 54 z-index: 1002; 55 overflow: auto; 56 57 } 58 #show .table a{ color:#ff8d0e;font-size:14px;} 59 #show .table a:hover{text-decoration:none;} 60 #show .table td{line-height:30px;} 61 #show .table i{font-size:16px; color:#ff8d0e} 62 </style> 63 </head> 64 <body> 65 66 <button type="button" class="btn btn-default btn-lg btn-block shangchuanbtn"> 67 <span class="glyphicon glyphicon-camera" aria-hidden="true"></span> 68 <span class="spcontents sppicload"><span id="sptext">上传凭证一次一张</span></span> 69 </button> 70 <section> 71 <div id="bg"></div> 72 <div id="show"> 73 <table class="table"> 74 <tr> 75 <td><i class="glyphicon glyphicon-camera"></i> <a id="a_takephoto" >拍 照</a></td> 76 </tr> 77 <tr> 78 <td> 79 80 <a href="javascript:;" class="file" > 81 <i class="glyphicon glyphicon-picture"></i> 选择图片 82 </a> 83 </td> 84 </tr> 85 <tr> 86 <td><i class="glyphicon glyphicon-home"></i> <a onclick="hidediv()">取 消</a></td> 87 </tr> 88 </table> 89 </div> 90 </section> 91 </body> 92 </html>
图片预览
遮罩三：
代码如下：
css:
#boxbg {
display: none;
position: absolute;
top: 0%;
left: 0%;
100%;
height: 0;
background-color: black;
z-index: 1001;
-moz-opacity: 0.7;
opacity: .70;
filter: alpha(opacity=70);
}
#boxshow {
border-radius:2px;
display: none;
position: absolute;
top:25%;
left:5%;
vertical-align:bottom;
90%;
text-align:left;
background-color: white;
z-index: 1002;
}
#a_reson{padding:10px; line-height:30px;}
#txtreason{height:135px;padding-left:10px; 100%; border-radius:5px; border:1px solid #e5e5e5;}
#box-line{border-right:1px solid #aaa}
#box-show-content{100%;background:#ddd; text-align:center; height:40px; padding-top:10px;}
#box-show-content a{color:#ff3300}
#box-show-content a:hover{text-decoration:none;}
html:
<div id="divhuiyi">
<button id="btnqingjia" class="btn btn-default btn-sm">请 假</button>
</div>
<section id="zhezhaobox">
<div id="boxbg"></div>
<div id="boxshow">
<article id="a_reson">
<span>理由 <i class="colorred">*</i></span>
<br />
<textarea id="txtreason" placeholder="请输入请假理由" maxlength="200"></textarea>
</article>
<div id="box-show-content">
<div class="row">
<div class="col-xs-6" id="box-line">
<a id="a_close">关闭</a>
</div>
<div class="col-xs-6">
<a id="a_ok">确认</a>
</div>
</div>
</div>
</div>
</section>
jss:
$(function () {
$("#btnqingjia").on("click", function () {
showdiv();
});
$("#a_close").on("click", function () {
hidediv();
})
$("#a_ok").on("click", function () {
var txtreson = $("#txtreason").val();
if (txtreson.length < 5) {
clickautohide(1, "理由信息必须大于5个字符");
} else if (txtreson.length > 200) {
clickautohide(1, "理由信息不得大于200个字符");
} else {
//success
}
});
})
//遮罩显示
function showdiv() {
event.preventDefault();
document.getElementById("boxbg").style.display = "block";
document.getElementById("boxshow").style.display = "block";
$("#boxbg").height(dqheight);
}
//遮罩隐藏
function hidediv() {
event.preventDefault();
document.getElementById("boxbg").style.display = 'none';
document.getElementById("boxshow").style.display = 'none';
}