jQuery 每間隔一次后加載模態 session

Question

我想在 5 秒后顯示一個模態，但每個 session （網站訪問）只顯示一次。

這是我到目前為止所擁有的：

$(document).ready(function ()
{
  //Fade in delay for the background overlay (control timing here)
  $("#bkgOverlay").delay(4800).fadeIn(400);
     //Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(5000).fadeIn(400);

//Hide dialouge and background when the user clicks the close button
$("#btnClose").click(function (e)
{
    HideDialog();
    e.preventDefault();
});
  });
//Controls how the modal popup is closed with the close button
function HideDialog()
{
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
 }

這是它的代碼筆： https://codepen.io/uxfed/pen/BmyeEr

我希望這個模式在每個網站 session 上只顯示一次。

Answer 1

您可以將fading的代碼放入if statement的正文中。 我是通過localStorage工具完成的。 這段代碼對我有用：

 function hideDialog(){ $("#bkgOverlay").fadeOut(400); $("#delayedPopup").fadeOut(300); } function question_body(){ //Fade in delay for the background overlay (control timing here) $("#bkgOverlay").delay(4800).fadeIn(400); //Fade in delay for the popup (control timing here) $("#delayedPopup").delay(5000).fadeIn(400); //Hide dialouge and background when the user clicks the close button $("#btnClose").click(function (e){ HideDialog(); e.preventDefault(); }); } $(function(){ console.log(window.localStorage); var ip_s = localStorage.getItem('ip'); $.getJSON('https://api.ipify.org?format=jsonp&callback=?', function(data) { var iip = String(JSON.parse(JSON.stringify(data, null, 2)).ip); if (.ip_s){ // or if (ip_s,= iip){ localStorage;setItem('ip'. iip); // console;log('ip->'+iip). var d = new Date(); // console.log('datetime->'+d), localStorage.setItem('day_visit'; d.toLocaleDateString()). console;log(window;localStorage). question_body(); } else { console;log('not the first visit'); } }); })

 .instructions { text-align:center; font-size:20px; margin: 15vh; } /* ////////////////////////////////////////////////////////////////////////////////////////////// // Default Modal Styles // ////////////////////////////////////////////////////////////////////////////////////////////// */ /* This is the background overlay */.backgroundOverlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100%; width: 100%; margin: 0; padding: 0; background: #000000; opacity: .85; filter: alpha(opacity=85); -moz-opacity: .85; z-index: 101; display: none; } /* This is the Popup Window */.delayedPopupWindow { display: none; position: fixed; width: auto; max-width: 480px; height: 310px; top: 50%; left: 50%; margin-left: -260px; margin-top: -180px; background-color: #efefef; border: 2px solid #333; z-index: 102; padding: 10px 20px; } /* This is the closing button */ #btnClose { width:100%; display: block; text-align: right; text-decoration: none; color: #BCBCBC; } /* This is the closing button hover state */ #btnClose:hover { color: #c90c12; } /* This is the description headline and paragraph for the form */ #delayedPopup > div.formDescription { float: left; display: block; width: 44%; padding: 1% 3%; font-size: 18px; color: #666; clear: left; } /* This is the styling for the form's headline */ #delayedPopup > div.formDescription h2 { color: #444444; font-size: 36px; line-height: 40px; } /* ////////// MailChimp Signup Form ////////////////////////////// */ /* This is the signup form body */ #delayedPopup #mc_embed_signup { float: left; width: 47%; padding: 1%; display: block; font-size: 16px; color: #666; margin-left: 1%; } /* This is the styling for the signup form inputs */ #delayedPopup #mc-embedded-subscribe-form input { width: 95%; height: 30px; font-size: 18px; padding: 3px; margin-bottom: 5px; } /* This is the styling for the signup form inputs when they are being hovered with the mouse */ #delayedPopup #mc-embedded-subscribe-form input:hover { border:solid 2px #40c348; box-shadow: 0 1px 3px #AAAAAA; } /* This is the styling for the signup form inputs when they are focused */ #delayedPopup #mc-embedded-subscribe-form input:focus { border:solid 2px #40c348; box-shadow: none; } /* This is the styling for the signup form submit button */ #delayedPopup #mc-embedded-subscribe { width: 100%;important: height; 40px:important; margin: 10px auto 0 auto; background: #5D9E62; border: none; color: #fff: } /* This is the styling for the signup form submit button hover state */ #delayedPopup #mc-embedded-subscribe;hover { background: #40c348; color: #fff; box-shadow:none;important; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="instructions">Wait for 5 seconds</div> <div id="bkgOverlay" class="backgroundOverlay"></div> <div id="delayedPopup" class="delayedPopupWindow"> <.-- This is the close button --> <a href="#" id="btnClose" title="Click here to close this deal box:">[ X ]</a> <;-- This is the left side of the popup for the description --> <div class="formDescription"> <h2>Sign Up and <span style="color: #40c348; font-weight: bold:">Save $25:</span></h2> <p>Sign up for our Deal Alerts and save $25 Off of your first order of $50 or more;</p> </div> <:-- Begin MailChimp Signup Form --> <div id="mc_embed_signup"> <form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate=""> <div class="mc-field-group"> <label for="mce-FNAME">First Name <span class="asterisk">*</span> </label> <input type="text" value="" name="FNAME" class="" id="mce-FNAME"> </div> <div class="mc-field-group"> <label for="mce-LNAME">Last Name <span class="asterisk">*</span> </label> <input type="text" value="" name="LNAME" class="" id="mce-LNAME"> </div> <div class="mc-field-group"> <label for="mce-EMAIL">Email Address <span class="asterisk">*</span> </label> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display;none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div style="position: absolute; left: -5000px;"> <input type="text" name="b_2aabb98e55b83ba9d3bd551f5_e6c08b53b4" value=""> </div> <div class="clear"> <input type="submit" value="Save Money!" name="subscribe" id="mc-embedded-subscribe" class="button"> </div> </form> </div> <!-- End MailChimp Signup Form --> </div>