search

Home  >  Article  >  Web Front-end  >  蒙板 模态对话框_html/css_WEB-ITnose

蒙板 模态对话框_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:27:591039browse

 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5     <title></title> 6     <style> 7         #maskBackground { position: absolute; left: 0px; top: 0px; opacity: 0.2; background-color: red; display: none; z-index: 99; } 8         /*蒙板*/ 9         #maskTip { position: absolute; border: 1px solid blue; background-color: white; z-index: 100; display: none; }10     </style>11     <script>12 13         function ShowMask() {14             //让背景蒙板显示，而且在填满整个浏览器15             var masBg = document.getElementById('maskBackground');16             masBg.style.display = 'block';17             masBg.style.width = window.innerWidth + 'px';18             masBg.style.height = window.innerHeight + 'px';19             //让前景蒙板显示，而且在浏览器的中间20             var maskTip = document.getElementById('maskTip');21 22             //要更改的地方 宽度高度23             maskTip.style.width = '100px';24             maskTip.style.height = '100px';25 26             maskTip.style.left = (window.innerWidth - parseInt(maskTip.style.width)) / 2 + 'px';27             maskTip.style.top = (window.innerHeight - parseInt(maskTip.style.height)) / 2 + 'px';28             maskTip.style.display = 'block';29             30         }31 32         function HideMask() {33             document.getElementById('maskBackground').style.display = 'none';34             document.getElementById('maskTip').style.display = 'none';35         }36 37     </script>38 </head>39 <body>40     <input type="button" id="btnShow" value="显示蒙板" onclick="ShowMask()" />41     <div id="maskBackground"></div>42     <div id="maskTip">43         <input type="button" id="btnHide" value="关闭蒙板" onclick="HideMask()" />44     </div>45 </body>46 </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如何实现让文字沉到元素的底部_html/css_WEB-ITnoseNext article：CSS3实现三角形_html/css_WEB-ITnose

Related articles

See more