遮罩的几种写法

遮罩一：

 

 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>
View Code

 

图片预览：

 

遮罩二：

 

 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>&nbsp;&nbsp;<a id="a_takephoto" >拍&nbsp;&nbsp;照</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>&nbsp;&nbsp;<a onclick="hidediv()">取&nbsp;&nbsp;消</a></td>
87                 </tr>
88             </table>
89         </div>
90     </section>
91 </body>
92 </html>
View Code

 

图片预览

 

 

 遮罩三：

代码如下：

css:

  #boxbg {
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 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;
            width:90%;
       text-align:left;
            background-color: white;
            z-index: 1002;
        }
   #a_reson{padding:10px; line-height:30px;}
       #txtreason{height:135px;padding-left:10px; width:100%; border-radius:5px; border:1px solid #e5e5e5;}
        #box-line{border-right:1px solid #aaa}
        #box-show-content{width: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';
}

　　

 

posted @ 2015-12-09 10:39  动我试试  阅读(944)  评论(0)  编辑  收藏  举报