Display Bootstrap Modal First time page loads

Question

I'm trying to display a bootstrap modal when a person first visits a page (after logging into my app). I want to use the modal to offer a "Getting Started" video and also offer a "don't show this to me a again" checkbox so a visitor can bypass the "getting start modal" on future logins.

I was able to get the modal to display on page load with the following tutorial:

Launch Bootstrap Modal on page load

But now I'm stuck on how to get it display only the first time a user visits the page after logging in. (it currently launches on page refreshes etc)

I'm new to javascript and programming and have created my app with Django Python 2.7.4

I really appreciate the time and expertise.

Answer 1

To do this, you'd need to use a means to store data about the user that persists between website visits, which is generally referred to as a session. In this particular case, it sounds like the users might not be logged in, which is referred to more specifically as an anonymous session.

There are a number of options available to you for storing anonymous sessions. The quickest and easiest would be using cookies, but other options include file-based sessions, Html5 storage, or databases.

From what you've written, I'd say that cookies are probably the best solution for you.

And, as you might expect, Django has built in functionality to ease working with cookies. I suggest looking into the documentation on Django sessions, which I find to be really accessible and easy to learn from, to see how to implement this.

If you have any more specific questions about using cookies (or anonymous sessions) in Django, just let me know and I'll try to help.

Answer 2

You can use jquery.cookies.js in combination with modal.js to load the page only once then set an expiry cookie.

            <script src="/path/to/jquery.cookie.js"></script>
            <script>
            $(document).ready(function() {
                 if ($.cookie(‘pop’) == null) {
                     $(‘#myModal’).modal(‘show’);
                     $.cookie(‘pop’, ’7');
                 }
             });
            </script>

You can find more details in this tutorial:

http://calebserna.com/bootstrap-modal-email-subscription-form/

Answer 3

Show Bootstrap Modal first time page load

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js">
</script>
<script type="text/javascript">
 $(document).ready(function() {
     if ($.cookie('pop') == null) {
         $('#myModal').modal('show');
         $.cookie('pop', '1');
     }
 });
</script>

You can set number of days to hide modal