Show modal on load only once

Question

I have a page that shows a modal dialog onload. There's a checkbox that user needs to check and submit (think Terms of Use) before the modal is dismissed. Once that happens the page can be reloaded again, but the dialog box should never come back. Originally I thought of using PHP session but I want to dismiss the dialog box with JS (jQuery) without reloading the page. What is an alternative? Can I use cookies for the duration of the session?

My current code looks like this:

JS:

$(document).delegate('#myButton', 'click', function() {

     if ($('input[name="myCheckbox"]').is(':checked')) {
        $('#myDialog').remove();
    }
});

HTML:

<div id="myDialog">
   text
   <input type="checkbox" name="myCheckbox"> <input id="myButton" type="button" value="click me">
</div>

score 4 · Accepted Answer · answered Nov 04 '12 at 16:40

4

You can use either localStorage permanently or sessionStorage just for one session

 localStorage.setItem('showModal',true);
 localStorage.getItem('showModal');

and it's pure javascript. No need to do it on the server side.

answered Nov 04 '12 at 16:40

Kirill Ivlev

12,310
5
27
31

Hmm, I've never used that... I think this is exctly what I was looking for. So, I add this to the click function and the wrap my onload modal function with condition -- if true?.. – santa Nov 04 '12 at 16:43
yep. In onload just check whether the user has already checked the checkbox or not via localStorage.getItem – Kirill Ivlev Nov 04 '12 at 16:45
Keep browser support in mind. Right now IE is the most problematic. Requires 8+. http://caniuse.com/namevalue-storage – Kenneth Ito Nov 04 '12 at 16:48
Gotta love that IE... So what are the alternatives? – santa Nov 04 '12 at 16:53
on the client side only cookies – Kirill Ivlev Nov 04 '12 at 16:53
cookies seem so convoluted. I just need it till the browser is closed, how do I do that with cookies? And I certainly rather limit the number of plugins I have to use. I try to stick only with those that i can constantly reuse, not once. – santa Nov 04 '12 at 16:59

score 2 · Answer 2 · edited Oct 21 '18 at 16:43

2

$(window).on('load',function(){
  if (document.cookie.indexOf('visited=true') == -1){

    $('#myModal').modal({show:true});
    var year = 1000*60*60*24*365;
    var expires = new Date((new Date()).valueOf() + year);
    document.cookie = "visited=true;expires=" + expires.toUTCString();
  }
});

edited Oct 21 '18 at 16:43

Mickael Maison

25,067
7
71
68

answered Oct 21 '18 at 16:21

yoo

21
1
3

Show modal on load only once

2 Answers2