zoukankan      html  css  js  c++  java
  • 蒙板 模态对话框

     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>

     可考虑:

    http://layer.layui.com/

  • 相关阅读:
    iterm2 关闭命令行的行数限制
    设置Mac关闭显示器后不睡眠
    设置iPhone内容隔空投送到mac
    Mac关闭动画效果
    mac使用Jmeter
    Mac 设置文件夹共享
    设置iPhone可以投屏到mac上
    Mac关闭显示亮度自动调节功能
    Mac系统无法使用root用户
    Mac设置主显示器
  • 原文地址:https://www.cnblogs.com/ICE_Inspire/p/5167366.html
Copyright © 2011-2022 走看看