zoukankan      html  css  js  c++  java
  • 点击文字或按钮弹出一个DIV窗口(DIV悬浮窗口)

    以下是弹出窗口代码: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

    <html> 
        <head> 
            <meta charset="utf-8">
            <title>点击文字弹出一个DIV层窗口代码</title> 
            <style> 
            .black_overlay{ 
                display: none; 
                position: absolute; 
                top: 0%; 
                left: 0%; 
                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%; 
                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 = "openDialog()">请点这里</a></p> 
            <div id="light" class="white_content">
                <table>
                    <tr>
                        <td>fffff</td>
                        <td>dddddd</td>
                    </tr>
                    <tr>
                        <td>fffff</td>
                        <td>dddddd</td>
                    </tr>
                    <tr>
                        <td>fffff</td>
                        <td>dddddd</td>
                    </tr>
                </table> 
                <a href = "javascript:void(0)" onclick = "closeDialog()">点这里关闭本窗口</a>
            </div> 
            <div id="fade" class="black_overlay"></div> 
        </body> 
        <script type="text/javascript">
            $(function(){
            })
            function openDialog(){
                document.getElementById('light').style.display='block';
                document.getElementById('fade').style.display='block'
            }
            function closeDialog(){
                document.getElementById('light').style.display='none';
                document.getElementById('fade').style.display='none'
            }
        </script>
    </html>
  • 相关阅读:
    模式对象管理
    Oracle数据库实例
    github使用简介
    Oracle数据库安装与连接与简介
    利益相关者分析
    问题账户需求分析
    2018春季学期需求工程概论阅读计划
    JAXB在Java 9/10并且使用Tomcat 9的问题
    mysql 备份 恢复
    IntelliJ IDEA安装bower
  • 原文地址:https://www.cnblogs.com/dandeliongogo/p/7206903.html
Copyright © 2011-2022 走看看