1861资源网：您身边、安全、高速、放心的专业下载站！
手机站 软件专题
1861资源网
热门搜索： 请搜索 软件： 相关信息 照明商店 搜索 教程：相关 爆裂点 照明商店 请输入 相关： 软件
您当前位置：首页 > 软件教程 > 代码特效 >> 点击文字按钮弹出小窗口代码

点击文字按钮弹出小窗口代码

    <!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%; 
                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; 
                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>
代码特效 发布: 2022-04-29   修改: 2024-04-21   阅:   评:   点击报错反馈
上一篇 : php站内调用方法
下一篇 : 最简单的文字向上滚动代码
相关文章
本类最新发布
本类推荐
本类评论
留言与评论（共有 0 条评论）
验证码：
本类软件分类
文章总排行
文章月排行
装机必备软件
全站下载总排行

1861资源网

http://www.zywlyy.cn/

   |

1861资源网 软件下载

虚假投诉

免费注册

关于本站

联系我们

软件下载

驱动下载

安卓软件

苹果软件

安卓游戏

苹果游戏

mac下载

系统工具

编程软件

本站留言

单机游戏

软件教程

1861资源网

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢网络科技公司技术支持