弹出层

it2022-05-09  35

<!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;    width: 100%;    height: 100%;    background-color: #343434;    z-index: 99;    opacity: 0.7;}#popup{    display: none;    position: fixed;    top: 50%;    left: 50%;    width: 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;    width: 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;    width: 1.7333rem;    height: 1.7333rem;    border-radius: 10px;}.mascotImg{    display: block;    width: 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" οnclick="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>

转载于:https://www.cnblogs.com/chabai/p/5073664.html


最新回复(0)