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

Answer 4

Well, you could use the localstorage for storing the action that happend, so it is persistant or you could use a cookie for example called shown and set it to false at the beginning and after the modal is shown you just set it to true.

Answer 5

There would certainly be ways to do this with Django. You could store the user's IP, for example, and track whether or not a user at that IP has ever hit the "don't show this again" button. This would be the only real way to know for sure that you weren't showing the video to someone who had requested not to see it. On the front end, users can always clear out their own cookies or local storage so front end tracking can get lost.

That said, here's an actual example, since you mentioned being new to JavaScript:

// When the user clicks the button...
localStorage.setItem('no_display', 'true');

// When a user visits the page...
var no_display = localStorage.getItem('no_display');
if (no_display !== 'true') {
  display_the_modal();
}

Answer 6

You can try this runnable code-

$(document).ready(function() {
     if ($.cookie('pop') == null) {
         $('#myModal').modal('show');
         $.cookie('pop', '7');
     }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

More can be found here.

If u approach this way, u will not get your problem (works for me).

So, what is done is status is saved in cookey. Depending on cookey, it is decided if the pop up need to be shown in the first time or not.

Answer 7

You can use this Script, I hope this will work:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
</script>
  
<script type="text/javascript">
 $(document).ready(function() {
     if (sessionStorage.getItem('#myModal') !== 'true') {
         $('#myModal').modal('show');
         sessionStorage.setItem('#myModal','true');     
     }
 });
</script>