javascript - Modal show once per session - Stack Overflow

admin管理员组

文章数量:1302523

I have modal wizard that shows an instruction in my page. I want to show the modal once per session

Here's my code

 <div class="modal fade" id="wizardmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Add Property</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">

          <!-- Smart Wizard HTML -->
          <div id="smartwizard">
              <ul>
                  <li><a href="#step-1">Step 1<br /><small>Add Property</small></a></li>
                  <li><a href="#step-2">Step 2<br /><small>Type of Property</small></a></li>
              </ul>

              <div>




        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>

I'm currently using modal show.

 $(window).on('load',function(){
    $('#wizardmodal').modal('show');
    });

The modal automatically show when i reload the page. What should I do?

I have modal wizard that shows an instruction in my page. I want to show the modal once per session

Here's my code

 <div class="modal fade" id="wizardmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Add Property</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">

          <!-- Smart Wizard HTML -->
          <div id="smartwizard">
              <ul>
                  <li><a href="#step-1">Step 1<br /><small>Add Property</small></a></li>
                  <li><a href="#step-2">Step 2<br /><small>Type of Property</small></a></li>
              </ul>

              <div>




        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>

I'm currently using modal show.

 $(window).on('load',function(){
    $('#wizardmodal').modal('show');
    });

The modal automatically show when i reload the page. What should I do?

• javascript
• php
• codeigniter

Share Improve this question Follow asked Sep 5, 2018 at 5:33 Tristan Ross LazaroTristan Ross Lazaro 1111 silver badge44 bronze badges 1

• use the session variable to check whether the session has started or not. – Exterminator Commented Sep 5, 2018 at 5:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Use window.sessionStorage to track whether it's been shown to the user in that session.

$(window).on('load',function(){
  if (!sessionStorage.getItem('shown-modal')){
    $('#wizardmodal').modal('show');
    sessionStorage.setItem('shown-modal', 'true');
  }
});

Already answered here

You can use jQuery Cookie:

$(document).ready(function() {
var dialogShown = $.cookie('dialogShown');

if (!dialogShown) {
    $(window).load(function(){
        $('#wizardmodal').modal('show');
        $.cookie('dialogShown', 1);
    });
}
});

Or Browser's localStorage:

$(document).ready(function() {
var dialogShown = localStorage.getItem('dialogShown')

if (!dialogShown) {
    $(window).load(function(){
        $('#wizardmodal').modal('show');
        localStorage.setItem('dialogShown', 1)
    });
}
});

本文标签： javascriptModal show once per sessionStack Overflow