Show or Hide modal with sessionStorage

Asked

Viewed 310 times

1

I was searching for a way to limit the appearance of a modal on my site, for example when clicking on a link asks for the e-mail registration before going to the anchor, but I do not want this to appear always, but once a session! I found something about Séssion Storage, can I do it for him? I do not understand much of javascript, sorry my ignorance!

Personal thank you.

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>

javascript jquery front-end

  • Yes you can. You would record in the session that the modal has already been displayed. And every time the page is loaded you check in the session whether to open the modal or not. If the site is in the air or has a code snippet that mounts your modal. Put it to help.

  • I put the code I’m using from Modal.

2 answers

1


That’s how Rodrigo responded. How you’re using Bootstrap follows an example to complement. It is interesting to check 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');
      }
    }
  });

  • Personal thank you! ;)

1

When he 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 store the data type, it is all string

Browser other questions tagged javascript jquery front-end

You are not signed in. Login or sign up in order to post.