jquery cookie示例 - 只提示一次的弹框

Devops海洋的渔夫

发布于 2019-05-31 10:37:42

1.8K0

发布于 2019-05-31 10:37:42

文章被收录于专栏：Devops专栏

经常有些网站在访问的时候，就是有一个弹框介绍一下通知内容。然后点击已读之后，就不会再弹出了。

那么这个功能是怎么做出来的呢？其实这个功能就是采用cookie的方式，当点击已读按钮，那么则存入一个标识在cookie里，当再次进入页面，则读取cookie，查看有没有标识，再判断是否弹出弹框。

首先编写基本的弹框HTML+CSS

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="jquery/js.cookie.js"></script>
    <script type="text/javascript">
        
    </script>
    <style type="text/css">
        
        .pop_con{
            /*display: none;*/
        }

        .pop{
            width: 300px;
            height: 300px;
            background-color: #fff;
            border:3px solid #000;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -150px;
            z-index: 9999;
        }

        .pop_con .mask{
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: rgb(0,0,0,0.3);
            z-index: 9990;
        }

        #close{
            position: absolute;
            right: 5px;
            top: 5px;
            font-size: 16px;
            font-weight: 755;
            color: red;
            text-decoration: none;
        }

    </style>
</head>
<body>

    <div class="pop_con">
        <div class="pop">
            <label>通知信息：</label>
            <a href="#" id="close">×</a>
            <p>走过路过，不要错过。全场清仓大甩卖！！</p>
            <input type="button" name="" value="朕知道了" id="had_read">
        </div>
        <div class="mask"></div>
    </div>


</body>
</html>

浏览器访问如下：