原理：

當用戶第一次訪問網站時候，此時沒有設置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>

效果：

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