JS使用cookie实现DIV提示层每次打开浏览器都能弹出

之前使用cookie实现DIV提示框只显示一次但是还是出现了一些问题，cookie一直存在并没有被清除，所以只有在第一次打开网站的时候才出现弹出框，现在实现的效果是每次打开浏览器都能弹出一次。

html:

<div class="mask-box" id="note" style="display: none;">
            <div class="default-img">
                <div class="mask-close js-mask-close">
                    <i class="yhfont" οnclick="closeclick()">X</i>
                </div>
                <a href="http://mall.changyou168.com/special/zqzt" target="_blank" class="boxHref light" style="background-image: url(../images/special/zqzt/alert.png); background-position: initial initial; background-repeat: no-repeat no-repeat;">
                    <img class="boxImg" src="../images/special/zqzt/alert.png" alt=""></a>


            </div>
        </div>

css:

.mask-box{width:100%;height:100%;background:rgba(0,0,0,.6);position:fixed;top:0;left:0;z-index:10001}
.default-img{width:auto;max-width:1000px;height:auto;position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}
.default-img img{width:100%;height:auto}
.mask-close{position:absolute;top:-26px;right:-33px;cursor:pointer;color:#fff;opacity:.8}
.mask-close i{font-size:28px;font-style:inherit}
.mask-close:hover{opacity:1}

js:

<script type="text/javascript">
            function closeclick() {
                document.getElementById('note').style.display = 'none';
                $.cookie('the_cookie', 'the_value');
            }


            $(document).ready(function () {
                $("#dome1 .done-warp .tempWrap").css("width", "100%");
                if (typeof ($.cookie("the_cookie")) == "undefined") {
                    $(".mask-box").show();
                    setTimeout("ding()", 10000);
                } else {
                    ding();
                }
                $.cookie('the_cookie', 'the_value');
            })


            function ding() {
                $(".mask-box").hide();
            }
        </script>