suchen

Heim  >  Artikel  >  Web-Frontend  >  蒙板 模态对话框_html/css_WEB-ITnose

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

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

 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>

 

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：css如何实现让文字沉到元素的底部_html/css_WEB-ITnoseNächster Artikel：CSS3实现三角形_html/css_WEB-ITnose

In Verbindung stehende Artikel

Mehr sehen