zoukankan      html  css  js  c++  java
  • js实现全屏弹框

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>全屏弹框</title>
        <style type="text/css">
            #DialogsAlert{
                505px;
                background-color:#fff;
                text-align:center;
                font-size:14px;
                color:#767676;
                font-family:"microsoft yahei",simsun,Tahoma,sans-serif;
                display: none;
                z-index: 9999;
                position:fixed;
                top:28%;
                left:36%;
            }
            #DialogsAlert h2{
                height:40px;
            }
            .act_pop_title{
                background: #005C91;
                color:#ffffff;
                text-align: left;
                text-indent: 30px;
                line-height: 40px;
                height:40px;
            }
            .Dialogs-Close{
                40px;
                height:40px;
                right:-45px;
                top:0;
                position:absolute;
                background-position: -419px 3px;
                z-index: 5;
                background-color: #005c91;
                color: #ffffff;
                font-size: 32px;
                line-height: 32px;
            }
        </style>
    </head>
    <body style="height:2000px;2000px">
    <input type="button" value="点击显示弹框或者小区弹框" onclick="DialogS();"/>
    <div id="DialogsAlert" class="act_pop">
        <a href="javascript:DialogS()" title="关闭"><span class="Dialogs-Close">X</span></a>
        <h2 class="act_pop_title">全屏弹框哦</h2>
    </div>
    <script type="text/javascript">
        function DialogS(){
            if(!(document.getElementById("Dialogs"))) {
                var oHead = document.getElementsByTagName("body")[0];
                var oDiv = document.createElement("div");
                oDiv.id = "Dialogs";
                oDiv.style = "height:100%;100%;left:0;top:0;background:#ccc;position:fixed;filter:Alpha(opacity=50);opacity:0.5; -moz-opacity:0.5;";
                oHead.appendChild(oDiv);
                document.getElementById("DialogsAlert").style.display = "block";
            }else if(document.getElementById("Dialogs").style.display == "none"){
                document.getElementById("DialogsAlert").style.display = "block";
                document.getElementById("Dialogs").style.display = "block";
            }else{
                document.getElementById("DialogsAlert").style.display = "none";
                document.getElementById("Dialogs").style.display = "none";
            }
        }
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    【OPENGL】第二篇 HELLO OPENGL(续)
    【转载】关于在vs2013中配置opengl红宝书第八版环境
    【OpenGL】 第一篇 OpenGL概览
    【OpenGL】第二篇 Hello OpenGL
    【OpenGL】VAO与VBO
    面试题五 数组中出现次数超过一半的数字 时间为O(n)
    intellij idea激活,免费激活方式分享
    使用接口还是使用抽象类
    CRM(Customer Relationship Management)
    java提高篇-----字符串
  • 原文地址:https://www.cnblogs.com/isuben/p/7066607.html
Copyright © 2011-2022 走看看