Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Look into <a href="http://jqueryui.com/dialog/#modal-confirmation" rel="nofollow">jQuery UI's modal</a> and sessionStorage.</p> <p>Here is an example of what you might look for:</p> <pre><code>function showHelpModal() { // Open the dialog and reset the timer $('#mymodal').dialog('open'); timeoutStarted = false; } var t; // Timeout variable var timeout = 1500; // Timeout in milliseconds var fakeSessionStorage = {}; // The fake sessionStorage, don't use this in your real code $(document).ready(function() { // Initialize the dialog $('#mymodal').dialog( { autoOpen: false, height: 500, width: 500, modal: true, buttons: { "Don't remind me": function() { fakeSessionStorage.stopReminding = true; $(this).dialog('close'); }, "Yes, please": function() { $(this).dialog('close'); } } }); // Set default reminder value if(!fakeSessionStorage.stopReminding) fakeSessionStorage.stopReminding = false; // On scroll... $(document).scroll(function() { // If the user doesn't want to be reminded, return false if(fakeSessionStorage.stopReminding) { console.log("Will not remind again"); return false; } // Start the timer and prevent it from firing while busy timeoutStarted = true; clearTimeout(t); t = setTimeout(showHelpModal, timeout); }); }); </code></pre> <p>And a working example at <a href="http://jsfiddle.net/3ev8h/2/" rel="nofollow">JSfiddle</a></p> <p>Please mind you that sessionStorage doesn't work on JSfiddle, so I used a object called <code>fakeSessionStorage</code> to cover for that.</p> <p>Also, sessionStorage doesn't work in Internet Explorer 7 or earlier.</p> <p><strong>[edit]</strong><br> I had the wrong fiddle linked, fixed that.</p> <p><strong>[edit 2]</strong><br> Having the <code>timeoutStarted</code> variable there was apparently the problem. I thought it was a neccessary thing but it was doing more bad than good.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload