一、CSS弹出层

这里写图片描述
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <style>/* 触发按钮 */
        .alert-click {
            width: 40px; height: 40px; display: block;
            background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
            background-image: url(./1.jpg);
            background-repeat:no-repeat;
            background-position: center;
            background-size: 24px;
            color: #fff; line-height: 2rem; text-align: center; font-size: 1.2rem;
            -webkit-border-radius: 50%; border-radius: 50%;
            position: fixed; right: 20px; top: 240px; z-index: 1001;
        }

        /* 透明灰色层 */
        .mask { 
            position: fixed; top: 0; left: 0; z-index: 998; 
            width: 100%; height: 100%; display: none;
            background-color: #000; opacity: 0.5; overflow: hidden;
        }

        /* 二维码层 */
        .board { 
            position: fixed; background-color: #fff; top: 25%; left: 20%; 
            width: 60%; height: 310px; z-index: 999; display: none;
            border: 1px solid red;
        }

        .board .logo span {
            display: block; height: 54px; color: #000;
            font-size: 16px; line-height: 54px; font-weight: 700;
            padding-left: 35%; padding-top: 4px; margin: 0 auto;
            background: url(./1.jpg) no-repeat 11% 0; background-size: 54px;
            border: 1px solid red;
        }
        .board .qrcode { 
            position: relative; width: 80%; 
            margin-left: 10%; margin-bottom: 8px;
            border: 1px solid red;
        }
        .board .qrcode img { 
            width: 100%; border-radius: 6px;
        }
        .board .heart span {
            display: block;
            height: 32px; width: 70px;
            margin: 0 auto; padding-left: 34px;
            font-size: 18px; color: #cc0000; line-height: 32px; font-weight: 700; text-align: center; 
            background: url(./1.jpg) no-repeat left 2px; background-size: 26px;
        }
        .board .text { 
            position: relative; width: 90%; 
            margin-left: 5%; margin-top: 2%; padding-bottom: 8px;
            text-align: center; color: #666;
        }

        </style>
</head>
<body>
   <!-- 触发按钮 -->
<div class="alert-click" id="alert-click"></div>

<!-- 底部透明灰色层 -->
<div class='mask'></div>

<!-- 二维码层 -->
<div class='board'>
    <div class="logo"><span>德玛乃康</span></div>
    <div class='qrcode'><img src='./1.jpg'></div>
    <div class="heart"><span>关注</span></div>
    <div class='text'>长按二维码关注公众号</div>
</div>

<script type="text/javascript">
    $("#alert-click").click(function(){
        $('.mask').css('display','block');
        $('.board').css('display','block');
    });
    $('.mask').click(function(){
        $('.mask').css('display','none');
        $('.board').css('display','none');
    });
    </script>
</body>
</html>
猜你喜欢
