zoukankan      html  css  js  c++  java
  • Js仿弹框

    收藏一个简单实用的JS弹框,通过隐藏和显示div来实现,代码来自脚本之家!

    <html>
        <head>
            <title>
                LIGHTBOX EXAMPLE
            </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=80); } .white_content { display:
                none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%;
                padding: 16px; border: 16px solid orange; background-color: white; z-index:1002;
                overflow: auto; }
            </style>
        </head>
        
        <body>
            <p>
                可以根据自己要求修改css样式
                <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">
                This is the lightbox content.
                <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
                    Close
                </a>
            </div>
            <div id="fade" class="black_overlay">
            </div>
        </body>
    </html>
  • 相关阅读:
    微信小程序-----校园头条详细开发之注册登录
    微信小程序-----校园头条详细开发之首页
    day 99天
    day 98天
    day 97 VUE第一天
    day 96
    day 95天
    day 94 RestFramework序列化组件与视图view
    day 93 Restframwork
    day 92
  • 原文地址:https://www.cnblogs.com/showersun/p/3669183.html
Copyright © 2011-2022 走看看