how to hide bootstrap modal on second visit of a wordpress page

Question

i'm working on a page in wordpress with the Bootstrap theme. there is a modal window on page load having a registration form on it.user can not see the content without filing the form.my problem is that whenevr user comes back to that page it shows the modal window,and i want to restrict that to once for a user.How can i achieve that.

Here is my Js for modal:

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#DownloadSignup').modal('show');
});
</script>

Here is what i have tried but its not working:

<script>
jQuery(document).ready(function($) {
    var isshow = localStorage.getItem('status');
  // alert(isshow);
    if (isshow == null) {
        localStorage.setItem('isshow', 1);

        // Show popup here
        $('#DownloadSignup').modal('show');
    } else if(isshow != null) {
       $('#DownloadSignup').modal('hide');
    }
});
</script>

score 2 · Answer 1 · answered Nov 27 '15 at 05:44

You need to use cache or sessions for this.

If want it for non-logged in user also, you should use cache. The cache need to be check if they exist on the system everytime the site is visited, if they are already set, don't show the modal. These will be set on the first visit, so that for every visit after that it will be already there thus hiding the modal.

If you need it with logged in user, you should use session, following same logic as above. Setting a value in session and checking if it exists before displaying the modal.

score 2 · Accepted Answer · edited Nov 27 '15 at 06:16

2

Change this

localStorage.setItem('isshow', 1);

to

localStorage.setItem('status', 'shown');

edited Nov 27 '15 at 06:16

JRodDynamite

12,325
5
43
63

answered Nov 27 '15 at 06:06

amsut

63
5

score 0 · Answer 3 · edited Nov 27 '15 at 06:16

0

Use this code in your page, I hope it will help you.

<script>
    if (!localStorage['someName']) {
        localStorage['someName'] = 'yes';
        myFunction();
    }
</script>

edited Nov 27 '15 at 06:16

JRodDynamite

12,325
5
43
63

answered Nov 27 '15 at 05:54

user2982042

100
7

score 0 · Answer 4 · answered Nov 27 '15 at 06:02

0

I guess you are not checking it correctly if you checking for if local-storage is set or no then you have to check its type and value like below...

var = localStorage.getItem('status');
if (localStorage.getItem("isshow") === null) {
   //...
}

answered Nov 27 '15 at 06:02

Amin Kodaganur

646
6
19

score 0 · Answer 5 · edited May 23 '17 at 11:44

Have you tried using Jquery Cookies. You can use this lib https://github.com/carhartl/jquery-cookie

$.cookie("Show", 1, {
   expires : 1,           //expires in 1 day

   path    : '/',          //The value of the path attribute of the cookie 
                           //(default: path of page that created the cookie).

   domain  : 'yourdomain.com',  //The value of the domain attribute of the cookie
                           //(default: domain of page that created the cookie).

   secure  : true          //If set to true the secure attribute of the cookie
                           //will be set and the cookie transmission will
                           //require a secure protocol (defaults to false).
});

If you are not interested in JQuery look at this other answer on how to set using native JS. https://stackoverflow.com/a/1460174/1411055

how to hide bootstrap modal on second visit of a wordpress page

5 Answers5