• 弹出层


    <!DOCTYPE html>
    <html lang="zh-cn" class="no-js">
    <head>
       <meta charset="utf-8">
        <!--允许全屏-->
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="yes" name="apple-touch-fullscreen">
        <meta content="telephone=no,email=no" name="format-detection">
        <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

    <style>

    #bg{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        100%;
        height: 100%;
        background-color: #343434;
        z-index: 99;
        opacity: 0.7;
    }
    #popup{
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        8.9333rem;
        margin-top: -2.4rem;
        margin-left: -4.46667rem;
        border: 1px solid #ccc;
        background-color: #fff;
        z-index: 999;
        border-radius: 15px;
        
    }
    .close{
        float: right;
        display: block;
        0.4rem;
        height: 0.4rem;
        margin: 0.26667rem;
        background: url(../images/close.jpg) no-repeat scroll 0 0;
        background-size: 0.4rem 0.4rem;
    }
    .behalf{
        padding:0.9333rem 1rem 0;
    }
    .mascot {
        float: left;
        1.7333rem;
        height: 1.7333rem;
        border-radius: 10px;
    }
    .mascotImg{
        display: block;
        100%;
        height: 100%;
    }
    .slogan {
        float: right;
        font-size: 14px;
        color: #000;
        line-height: 1.5;
    }
    [data-dpr="2"] .slogan{
        font-size: 28px;
    }
    [data-dpr="3"] .slogan{
        font-size: 42px;
    }
    .download{
        text-align: center;
        margin: 0.5333rem auto;
    }
    .btns{
        padding:0.32rem 1.0667rem;
        color: #fff;
    }

    </style>

    </head>

    <div id="bg"></div>
            <div id="popup" style="">
                <i class="close" onclick="hidediv();"></i>
                <div class="behalf clearfix">
                    <div class="mascot">
                        <img src="images/mascot.jpg" class="mascotImg" alt=""></div>
                    <div class="slogan">
                        <p>品质家居,只为寓悦</p>
                        <p>用心生活,才不辜负自己</p>
                        <p>寓悦,为你的家发声</p>
                    </div>
                </div>
                <div class="download">
                    <button class="btns btn" type="button">立即下载</button>
                </div>
            </div>

    <script language="javascript" type="text/javascript">
             function showdiv() {
             document.getElementById("bg").style.display ="block";
             document.getElementById("popup").style.display ="block";
             }
             function hidediv() {
             document.getElementById("bg").style.display ='none';
            document.getElementById("popup").style.display ='none';
             }
        </script>

  • 相关阅读:
    uestc Can You Help God Wu
    uestc 方老师开橙卡
    【JS】【24】监听鼠标滚轮事件
    【Java】【26】截取字符串
    【HTML&CSS】【5】点击号码可以调用手机拨号功能
    【JS】【23】on()绑定事件和off()解除绑定事件
    【Eclipse】【5】FreeMarker插件
    【Oracle】【18】获取数据库当前用户下所有表名和表名的注释
    【其他】【PL/SQL Developer】【2】报错Initialization error Could not load ".../oci.dll"解决方法
    【JDK】【1】下载官方版本
  • 原文地址:https://www.cnblogs.com/chabai/p/5073664.html
Copyright © 2020-2023  润新知