Home >Web Front-end >HTML Tutorial >遮罩的几种写法_html/css_WEB-ITnose
遮罩的几种写法_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:32:181055browse
遮罩一：
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>
图片预览
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css中float left与float right的使用说明_html/css_WEB-ITnoseNext article：经典CSS实现三角形图标原理解析_html/css_WEB-ITnose