您的位置：首页 > 其它

点击弹出一个div弹框示例

2018-01-31 19:15 204 查看
<!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: 25%; 

            left: 25%; 

            width: 55%; 

            height: 55%; 

            padding: 20px; 

            border: 10px solid orange; 

            background-color: white; 

            z-index:1002; 

         
4000
  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 id="fade" class="black_overlay"></div> 

    </body> 

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航