遮罩的几种写法_html/css_WEB-ITnose

遮罩一：

 1  2  3  4      5      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     15     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     44 45 46     47     
48     
49         内容测试50         51     
52 53 

登录后复制

图片预览：

立即学习“前端免费学习笔记（深入）”；

遮罩二：

 1  2  3  4  5      6      7      8  9     10     11     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     30     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     63 64 65    66     67         68         上传凭证一次一张69     70     
71         
72         
73             74                 75                     76                 77                 78                     84                 85                 86                     87                 88             
  拍  照
79 80                         81                              选择图片82                         83                     
  取  消
89         
90     
91 92 

登录后复制

图片预览

立即学习“前端免费学习笔记（深入）”；