Tengo un modal que aparece después de un tiempo, no cuando hago clic en un botón, pero me gustaría cerrar el modal de forma permanente y configurarlo en un almacenamiento local si ese usuario en particular no quiere volver a ver el modal.
Este es el código que he escrito para intentarlo.
<script> $(function() { const showModal = localStorage.getItem("modal") === null; $(".modal").toggleClass("d-none") $(".modal_close").on("click",function() { localStorage.setItem("modal","seen"); $(this).closest(".modal").addClass("d-none") }); }) </script>el modal
<div class="modal fade" style="background: rgba(0, 0, 0, 0.548);" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content animate-grad text-white"> <div class="modal-header text-center"> <h5 class="modal-title " style="text-align: center;" id="exampleModalLabel"><strong>{{follow_us.title}}</strong></h5> <p style="border-top: 1px solid white;"></p> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> {% if follow_us.content %} <div class="modal-body"> <p>{{ follow_us.content }}</p> </div> {% endif %} <div class="d-flex text-white"> </div> <div class="modal-footer w-100"> <a style="cursor: none;" class="modal_close close"> Do not show this again.</a> </div> </div> </div> </div>quiero cerrar permanentemente el modal cuando se hace clic en el botón No volver a mostrar esto . ¿Cómo logro esto?
Puedes probar algo como esto.
Nota :
localStorageno funciona en el "fragmento de código", por lo que debe probar el código localmente.
$(document).ready(function(){ if( !localStorage.getItem("modal-seen") ){ setTimeout(() => $('#exampleModal').modal('show'), 1000); // wait a sec before showing modal $('.modal_close').click(function(){ localStorage.setItem("modal-seen", true); $('#exampleModal').modal('hide'); }) } }); <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> <div class="modal fade" style="background: rgba(0, 0, 0, 0.548);" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content animate-grad text-white"> <div class="modal-header text-center"> <h5 class="modal-title " style="text-align: center;" id="exampleModalLabel"><strong>{{follow_us.title}}</strong></h5> <p style="border-top: 1px solid white;"></p> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> {% if follow_us.content %} <div class="modal-body"> <p>{{ follow_us.content }}</p> </div> {% endif %} <div class="d-flex text-white"> </div> <div class="modal-footer w-100"> <a style="cursor: none;" class="modal_close close"> Do not show this again.</a> </div> </div> </div> </div>Creo que puedes cambiarlo así.
const showModal = localStorage.getItem("modal") === null; $(".modal").modal("show") $(".modal_close").on("click",function() { localStorage.setItem("modal","seen") $(this).closest(".modal").modal('hide') }); pero me pregunto si podrías cambiar la id de modal