マスクモードダイアログ
6263 ワード
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>