溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JS通過設(shè)置cookie來控制彈出層，首次打開頁面顯示彈出層

發(fā)布時(shí)間：2020-10-15 04:01:29 來源：網(wǎng)絡(luò) 閱讀：1200 作者：pmlinjian 欄目：開發(fā)技術(shù)

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.jb51.net/" />

<title>JS通過設(shè)置cookie來控制彈出層，首次打開頁面顯示彈出層，刷新頁面不再顯示；關(guān)閉瀏覽器重新打開、清除緩存cookie顯示。</title>

    <link rel="stylesheet" href="static/css/global.css"/>

    <style>

        .infor-layer {

            background: url('https://cache.yisu.com/upload/information/20200312/65/247787.jpg?150ac022a67') no-repeat top center;

            width: 744px;

            height: 407px;

            position: fixed;

            top: 50%;

            left: 50%;

            z-index: 9990;

            margin-top: -203px;

            margin-left: -372px;

            display: none;

        }

        .infor-layer .sub-alltext{  width: 258px;

            margin: 98px 0 0 210px;}

        .infor-layer .sub-alltext h2 {

            font-size: 24px;

            color: #fff;

        }

        .infor-layer .sub-alltext p {

            font-size: 16px;

            line-height: 2;

            margin-top: 10px;

            color: #fff;

        }

        .infor-layer .layer-goto-btn {

            background: url('https://cache.yisu.com/upload/information/20200312/65/247788.jpg?150ac022a65') no-repeat top center;

            width: 225px;

            height: 47px;

            position: absolute;

            bottom: 28px;

            left: 50%;

            display: inline-block;

            margin-left: -163px;

        }

        .infor-layer .layer-goto-btn:hover {

            background: url('https://cache.yisu.com/upload/information/20200312/65/247789.jpg?150ac022a66') no-repeat top center;

            width: 225px;

            height: 47px;

        }

        .infor-layer .close {

            width: 25px;

            height: 25px;

            border-radius: 25px;

            color: #04774a;

            position: absolute;

            font-size: 26px;

            top: 53px;

            right: 282px;

            display: block;

            border: 2px solid #04774a;

            text-align: center;

            line-height: 20px;

        }

        .markes {

            background: #000;

            opacity: 0.6;

            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

            filter: alpha(opacity=60);

            width: 100%;

            height: 100%;

            position: absolute;

            left: 0;

            top: 0;

            z-index: 999;

            display: none;

        }

    </style>

    <script type="text/javascript" src="jq.js"></script>

</head>

<body>

<div class="infor-layer">

    <div class="sub-alltext">

        <h2>講師會(huì)員卡！</h2>

        <p>擁有講師會(huì)員卡，學(xué)習(xí)實(shí)惠又全面學(xué)習(xí)實(shí)惠又全面學(xué)習(xí)實(shí)惠又全面學(xué)習(xí)實(shí)惠又全面</p>

    </div>

    <a target="_blank" class="layer-goto-btn"></a>

    <a href="" id="J_indexNoteClose" class="close">×</a>

</div>

<!--半透膜層-->

<div class="markes"></div>

<script>

    $(function(){

        var t = 1000;

        var cname = "cname5574";

        setTimeout(function(){


            var v = getCookie(cname);

            if(v==undefined){

                $(".infor-layer").show();

                $(".markes").height($(document.body).height()).show();

                document.cookie = cname+"=1";

            }

        },t);

        $("#J_indexNoteClose").on('click',function(event){

            document.cookie = cname+"=1";

            $(".markes").remove();

            $(".infor-layer").remove();

            event.stopPropagation();

            event.preventDefault();

            return false;

        });

        function getCookie(name){

            var cookie = document.cookie;

            var a = cookie.split("; ");

            for(var j=0,m=a.length;j<m;j++){

                var b = a[j].split("=");

                if(b[0].toLowerCase()==name){

                    return b[1];

                    break;

                }

            }

        }

    });

</script>

</body>

</html>


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手