🥇 Dispensar Bootstrap modal (para sempre!) Com jQuery Cookie, no clique

Esta é uma variação da dica encontrada aqui . Veja um exemplo do resultado final aqui .

Eu adicionei a opção de atrasar a exibição modal do Bootstrap e alterei o gatilho de clique de um id para uma classe . Portanto, vários elementos podem agora acionar o cookie que diz ao modal para não reaparecer nunca mais – por exemplo, um botão “Não mostrar mais isso” e um botão “Inscrever-se” podem acioná-lo. Basicamente, meu uso favorito é permitir que os usuários que já assinaram o boletim informativo não se preocupem em fazê-lo novamente.

Scripts e estilos necessários

<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Latest jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Bootstrap Core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Cookie JS for Modal -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>

HTML modal básico de bootstrap (com classe de disparo de cookies nos botões)

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Your Mailchimp form goes here, or whatever you like. Example input below.</p>
        <div class="input-group">
          <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
          <input type="email" class="form-control" placeholder="Email Address">
        </div>
      </div>
      <div class="modal-footer">
        <!-- Make sure to include the 'nothanks' class on the buttons -->
        <button class="btn btn-default nothanks" data-dismiss="modal" aria-hidden="true">Don't Show Me This Again</button>
        <button class="btn btn-primary nothanks" data-dismiss="modal" aria-hidden="true">Subscribe</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Javascript a ser incluído na página com o modal.

// Delayed Modal Display + Cookie On Click
$(document).ready(function() {

  // If no cookie with our chosen name (e.g. no_thanks)...
  if ($.cookie("no_thanks") == null) {

    // Show the modal, with delay func.
    $('#myModal').appendTo("body");
    function show_modal(){
      $('#myModal').modal();
    }

    // Set delay func. time in milliseconds
    window.setTimeout(show_modal, 3000);
    }

  // On click of specified class (e.g. 'nothanks'), trigger cookie, with expiration in year 9999
  $(".nothanks").click(function() {
    document.cookie = "no_thanks=true; expires=Fri, 31 Dec 9999 23:59:59 UTC";

  });
});

A coisa toda junto

(Copie e cole diretamente na sua página html.)

<head>
  <!-- Bootstrap Core CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <!-- Latest jQuery Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Bootstrap Core JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <!-- Cookie JS for Modal -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
</head>

<body>

  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <p>Your Mailchimp form goes here, or whatever you like. Example input below.</p>
          <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
            <input type="email" class="form-control" placeholder="Email Address">
          </div>
        </div>
        <div class="modal-footer">
          <!-- Make sure to include the 'nothanks' class on the buttons -->
          <button class="btn btn-default nothanks" data-dismiss="modal" aria-hidden="true">Don't Show Me This Again</button>
          <button class="btn btn-primary nothanks" data-dismiss="modal" aria-hidden="true">Subscribe</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <script>
    // Delayed Modal Display + Cookie On Click
    $(document).ready(function() {

      // If no cookie with our chosen name (e.g. no_thanks)...
      if ($.cookie("no_thanks") == null) {

        // Show the modal, with delay func.
        $('#myModal').appendTo("body");
        function show_modal(){
          $('#myModal').modal();
        }

        // Set delay func. time in milliseconds
        window.setTimeout(show_modal, 3000);
        }

      // On click of specified class (e.g. 'nothanks'), trigger cookie, which expires in 100 years
      $(".nothanks").click(function() {
        $.cookie('no_thanks', 'true', { expires: 36500, path: '/' });
      });
    });
  </script>

</body>

É isso aí!

Respostas relacionadas:

Alterar o ponto de interrupção do Bootstrap NavBar

Scripts e estilos necessários

HTML modal básico de bootstrap (com classe de disparo de cookies nos botões)

Javascript a ser incluído na página com o modal.

A coisa toda junto

Respostas relacionadas:

Related Posts