分享知识-快乐自己：弹层

最新推荐文章于 2024-11-02 19:19:35 发布

andymmm0925

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量328

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mlq2017/p/10394994.html

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <style type="text/css">  
    #login  
    {  
        display:none;  
        border:1em solid #3366FF;  
        height:30%;  
        width:50%;  
        position:absolute;/*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/  
        top:24%;/*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/  
        left:24%;  
        z-index:2;/*个人理解为层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/  
        background: white;
 overflow: auto;          
    }  
    #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;  
    }  
    </style>  
</head>  
<body>  
  <a href="javascript:show()">弹出</a>  
  <div id="login">  
      <a href="javascript:hide()">关闭</a>  
      <div>这里是关闭弹窗的内容</div>  
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
            <div>这里是关闭弹窗的内容</div>  
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div>
            <div>这里是关闭弹窗的内容</div>  
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div>
            <div>这里是关闭弹窗的内容</div>  
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div>
            <div>这里是关闭弹窗的内容</div>  
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div> 
      <div>这里是关闭弹窗的内容</div>
  </div>  
  <div id="over"></div>  
</body>  
</html>  
  
<script type="text/javascript">  

    function show()  
    {  
        var login = document.getElementById('login');  
        var over = document.getElementById('over');  
        login.style.display = "block";  
        over.style.display = "block";  
    }  
    function hide()  
    {  
       var login = document.getElementById('login');  
        var over = document.getElementById('over');    
        login.style.display = "none";  
        over.style.display = "none";  
    }  
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
<html>   
    <head>   
        <title>点击文字弹出一个DIV层窗口代码</title>   
        <style>   
        .black_overlay{   
            display: none;   
            position: absolute;   
            top: 0%;   
            left: 0%;   
            width: 100%;   
            height: 100%;   
            background-color: black;   
            z-index:1001;   
            -moz-opacity: 0.8;   
            opacity:.80;   
            filter: alpha(opacity=88);   
        }   
        .white_content {   
            display: none;   
            position: absolute;   
            top: 15%;   
            left: 25%;   
            width: 55%;   
            height: 55%;   
            padding: 20px;   
            border: 10px solid orange;   
            background-color: white;   
            z-index:1002;   
            overflow: auto;   
        }   
    </style>   
    </head>   
    <body>   
        <p>示例弹出层：<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a></p>   
        <div id="light" class="white_content">这是一个层窗口示例程序. 
            <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这里关闭本窗口</a>
         <div>这里是关闭弹窗的内容</div>  
     
        </div>   
        <div id="fade" class="black_overlay"></div>   
    </body>   
</html>