js实现带遮盖罩效果的div告警弹窗

<!DOCTYPE HTML> 
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <style type="text/css">  
    #login  
    {  
        display:none;
        border: 5px solid #999;
        height:220px;
        width:440px;
        position:absolute;/*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/  
        top:24%;/*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/  
        left:36%;
        z-index:2;/*层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/
        background: white;  
    }  
    #over  
    {  
        width: 100%;  
        height: 100%;  
        opacity:0.8;/*设置背景色透明度,1为完全不透明,IE需要使用filter:alpha(opacity=80);*/  
        filter:alpha(opacity=80);  
        display: none;  
        position:absolute;  
        top:0;  
        left:0;  
        z-index:1;  
        background: silver;  
    }
    #win_top{
        height: 30px;
        width: 440px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #999;
        line-height: 30px;
        color: #666;
        font-family: "微软雅黑", Verdana, sans-serif, "宋体";
        font-weight: bold;
        text-indent: 1em;
    }
    </style>  
</head>  
<body>  
  <a href="javascript:show()">弹出</a>  
  <div id="login">
      <div id="win_top">
          <img src="image/danger.png" style="width:20px;height:20px;position: relative;right: 12px;top: 4px;">
          <span style="position: relative;right: 15px">告警窗demo</span>
          <img src="image/close.png" onclick="javascript:hide()" style="position: relative;width:20px;height:20px;left:274px;top: 3px;">
      </div>

      <div>这里是关闭弹窗的内容</div>  
  </div>  
  <div id="over"></div>  
</body>  
</html>  
  
<script type="text/javascript">  
var login = document.getElementById('login');  
var over = document.getElementById('over');  
    function show()  
    {  
        login.style.display = "block";  
        over.style.display = "block";  
    }  
    function hide()  
    {  
        login.style.display = "none";  
        over.style.display = "none";  
    }  
</script>
js实现带遮盖罩效果的div告警弹窗

猜你喜欢
