利用cookies實現對彈出窗口頻率的控制

原理：

當用戶第一次訪問網站時候，此時沒有設置cookies參數,而且設置過時，彈出顯示對話框，彈完以後，設置cookies參數」popped=yes;expires=」+date.toGMTString()」，第二次加載時候，判斷存在這個參數，則跳過加載對話框，cookies失效後，瀏覽器會自動刪除失效的參數

代碼：

JS/css引入

<link rel=」stylesheet」 href=」//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css」>
<script src=」//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js」></script>
<script src=」//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js」></script>

JS函數

<script>
$(function() {
if (get_cookie(‘popped’)==」){
$(「#dialog-modal」).show();
$( 「#dialog-modal」 ).dialog({
height: 410,
width: 815,
modal: true
});

var date=new Date();
date.setTime(date.getTime()+12*60*60*1000); //設置date爲當前時間+30分
document.cookie=」popped=yes;expires=」+date.toGMTString();

}else{
$(「#dialog-modal」).hide();
}
});

function get_cookie(Name) {
var search = Name + 「=」
var returnvalue = 「」;
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(「;」, offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
</script>

DIV模塊

<div id=」dialog-modal」 title=」關注公衆號（Java雜記），領取免費的學習資源，目前受益良多」 style=」width: auto;min-height: 0px;max-height: none;height: 360px;display:none;」>
<p><img src=」http://www.liuhaihua.cn/wp-content/uploads/2018/07/888.png」 data-baiduimageplus-ignore data-tag=」bdshare」/></p>
</div>

效果：