• 弹出层代码


    <!--弹出框-->
    <div class="pop_up" style="display:block;" id="update_ok">
        <div class="pop_up_bg"></div>
        <div class="pop_up_main">
            <div class="pop_up_sz"><p>修改成功</p></div>
            <!-- <div class="pop_up_dl"><a href="#">登 陆</a></div> -->
            <div class="confirmBtn" onclick="document.getElementById('update_ok').style.display='none';">确&nbsp定</div>
        </div>
    </div>    
    <!--弹出框-->  
    
    <style type="text/css">
    /*弹出框*/
    body{
        font-family: "黑体","SimHei",sans-serif;
    }
    .pop_up {
        width: 100%;
        margin: 0 auto;
    }
    .pop_up_bg {
        width: 100%;
        height: 100%;
        position: fixed;
        background: #000;
        left: 0;
        top: 0;
        z-index: 15;
        -webkit-opacity: 0.5;
        /* Netscape and Older than Firefox 0.9*/
        -moz-opacity: 0.5;
        /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
        -khtml-opacity: 0.5;
        /* IE9 + etc...modern browsers*/
        opacity: .5;
        /* IE 4-9*/
        filter: alpha(opacity=50);
        /*This works in IE 8 & 9 too*/
        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)";
        /*IE4-IE9*/
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
    }
    .pop_up_main {
        width: 15%;
        margin: auto 42%;
        background: #fff;
        top: 40%;
        position: absolute;
        z-index: 22;
        /*padding: 5% 10%;*/
        border-radius: 10px;
    }
    .pop_up_sz {
        width: 90%;
        margin: 10% auto;
        overflow: hidden;
    }
    .pop_up .confirmBtn {
        width: 28%;
        margin:0 auto 5%;
        border-radius: 5px;
        background: #1881DC;
        text-align: center;
        height: 20px;
        line-height: 20px;
        color: white;
        cursor: pointer;
        padding: 10px 20px;
        font-size: 16px;
    }
    .pop_up_sz p {
        font-size: 18px;
        font-weight: bold;
        font-family: "微软雅黑";
        color: #000000;
        text-align: center;
    }
    .pop_up_dl {
        width: 90%;
        margin: 0 auto;
        overflow: hidden;
        margin-top: 6%;
        text-align: center;
    }
    .pop_up_dl a {
        padding: 2% 5%;
        background: #ff0000;
        color: #fff;
        font-size: 1.6vw;
        text-align: center;
        width: 50%;
        display: block;
        border-radius: 8px;
        margin-left: 14%;
    }
    /*弹出框end*/  
    </style>
    View Code

    别人写的代码,蛮好,收藏了。

    弹层
    <!--弹出框-->
    <div class="pop_up" style="display:none;" id="update_ok">
        <div class="pop_up_bg"></div>
        <div class="pop_up_main">
            <div class="pop_up_sz"><p>修改成功</p></div>
            <!-- <div class="pop_up_dl"><a href="#">登 录</a></div> -->
            <div class="confirmBtn" onclick="document.getElementById('update_ok').style.display='none';">确定</div>
        </div>
    </div>    
    <!--弹出框-->  
    
    
    /*弹出框*/
    .pop_up {
        width: 100%;
        margin: 0 auto;
    }
    .pop_up_bg {
        width: 100%;
        height: 100%;
        position: fixed;
        background: #000;
        left: 0;
        top: 0;
        z-index: 15;
        -webkit-opacity: 0.5;
        /* Netscape and Older than Firefox 0.9*/
        -moz-opacity: 0.5;
        /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
        -khtml-opacity: 0.5;
        /* IE9 + etc...modern browsers*/
        opacity: .5;
        /* IE 4-9*/
        filter: alpha(opacity=50);
        /*This works in IE 8 & 9 too*/
        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)";
        /*IE4-IE9*/
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
    }
    .pop_up_main {
        width: 30%;
        margin: auto 26%;
        background: #fff;
        top: 40%;
        position: absolute;
        z-index: 22;
        /*padding: 5% 10%;*/
        border-radius: 10px;
    }
    .pop_up_sz {
        width: 90%;
        margin: 10% auto;
        overflow: hidden;
    }
    .pop_up .confirmBtn {
        width: 80%;
        margin:0 auto 5%;
        border-radius: 5px;
        background: red;
        text-align: center;
        height: 24px;
        line-height: 24px;
        color: white;
        cursor: pointer;
    }
    .pop_up_sz p {
        font-size: 1.7vw;
        font-weight: bold;
        font-family: "微软雅黑";
        color: #000000;
    }
    .pop_up_dl {
        width: 90%;
        margin: 0 auto;
        overflow: hidden;
        margin-top: 6%;
        text-align: center;
    }
    .pop_up_dl a {
        padding: 2% 5%;
        background: #ff0000;
        color: #fff;
        font-size: 1.6vw;
        text-align: center;
        width: 50%;
        display: block;
        border-radius: 8px;
        margin-left: 14%;
    }
    /*弹出框end*/  
    View Code
  • 相关阅读:
    C#操作Word (2)-- 打开&关闭Word文档
    JS input 银行卡号格式转换
    解决H5在微信浏览器或QQ浏览器修改title的问题
    CSS
    Atom 编辑器使用和学习
    php的一个小坑,输出不了json_encode
    js 组合键监听ctrl + enter
    webpack3.0 环境搭建
    css 使表格随着内容自动适应宽度
    获取input光标的x和y轴
  • 原文地址:https://www.cnblogs.com/xiayedexin/p/4692323.html
Copyright © 2020-2023  润新知