Show or Hide modal with sessionStorage

Navigation
1

I was researching a way to limit the appearance of a modal on my site, for example when clicking on a link it asks for the registration of the email before going to the ancora, but I do not want this to always appear, time per session! I found something about session storage, can I do this for it? I do not understand much of javascript, sorry for my ignorance!

Thank you guys.

Code of my modal. 

  <!-- Modal -->
 <div class="modal fade" id="myModal3" role="dialog">
  <div class="modal-dialog modal-sm">
   <div class="modal fade" id="myModal3" role="dialog">
     <div class="modal-dialog modal-sm">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Meu site.</h4>
    </div>
    <div class="modal-body">
      <p>Deseja receber mais informações por e-mail?</p>
      <form name="email" action="enviaEmail.php" method="POST" enctype="multipart/form-data">
        <div class="form-group">
          <input type="email" class="form-control" id="email" name="enterEmail" placeholder="Enter email" required>
        </div>
              <!--Oculto para mandar o produto clicado-->
          <input type="hidden" class="form-control" name="cliqueSistema" id="cliqueSistema">    

        <button type="submit" class="btn btn-default" onclick="Alerta1()">Enviar</button>
      </form>
    </div>
    <div class="modal-footer">

    </div>
  </div>

</div>

    
asked by anonymous 03.11.2016 / 13:33

2 answers

1

It's like Rodrigo answered. As you are using Bootstrap follow an example to complement. It is interesting to see if the browser supports Storage so as not to disturb the rest of your script. 

$(document).ready(function() {
    var exibirModal = true;

    // Verifica se o navegador possui suporte a Storage.
    // E verifica na variável de sessão se a modal já foi aberta.
    if (typeof(Storage) !== 'undefined' && sessionStorage.getItem('modalExibida') == 'true') {
      exibirModal = false;
    } else {
      exibirModal = true;
    }

    if (exibirModal) {
      $('#myModal3').modal('show');

      if (typeof(Storage) !== 'undefined') {
        sessionStorage.setItem('modalExibida', 'true');
      }
    }
  });
    
03.11.2016 / 15:02
1

When it closes the modal use: 

window.sessionStorage.setItem('ja_exibiu', 'true');

Then to validate whether it's the first time or not, use: 

if (window.sessionStorage.getItem('ja_exitiu') == 'true') {...}

Remembering that sessionStorage does not save the data type, it's all string

    
03.11.2016 / 13:54
How to show in while an array with several things How do I prepare the packages in oracle?