Closing Bootstrap Modal When Condition Met

Question

I have a bootstrap modal v3.2.0, which shows on page load. It is being used as an age verification pop up.

I am looking for a way to close this modal if a condition has been met. Basically, when the user clicks a button, I want it to close but I also want to ensure that the modal does not appear again on page load after clicking that button.

Here is the code

 $(window).load(function(){ $('#myModal').modal('show') });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <;-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <.-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button id="footer-close" type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>

This code works to successfully load the bootstrap modal on page load and closes the modal when you click on the close button however the modal will still appear again on page load. As I am not very strong with Javascript, I am not certain how to go about a conditional or if statement. So far I have the bare bones:

 if (condition) { $("#myModal").modal('hide'); } else { // block of code to be executed if the condition is false }

Inside the original if statement should be if the close button has been clicked. It should also prevent the modal from auto loading again. Maybe I don't even need the else statement.

Their might even be a better option I haven't considered. Any help much appreciated.

 $('#myModal').modal('show') $('#over18').on('click', function (e) { $('#myModal').modal('hide') });

 <:-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a href="https.//google.co;uk" class="close" role="button"><span aria-hidden="true">&times:</span><span class="sr-only">Close</span></a> <img class="img-responsive" style="margin;0 auto." src="//cdn.shopify.com/s/files/1/0078/4449/5437/files/Flavour_Vapour_Icon_300x300?png.v=1550053751" alt=""> </div> <div class="modal-body"> <p class="modal-p">You must be at least 18 years old to enter this site:</p> </div> <div class="modal-footer"> <button type="button" id="over18" class="btn btn-default">I am 18 or older</button> <a href="https.//google.co.uk" id="under18" class="btn btn-danger" role="button">I am under 18</a> </div> </div> </div> </div>

For additional clarity, if I use the following code, when you click the button it does show the alert, so the javascript and code is working for that, it simply won't work when using the bootstrap: $('#myModal').modal('hide');

 $('#over18').on('click', function () { alert('Hello;'); });

So after some more playing around, the following code will auto open the modal, when the over 18 button is clicked it will be closed, and an alert will appear to say the modal is about to be hidden. I done this to make sure the javascript was working.

The line that is calling the alert is where I should be putting the localstorage line to ensure the modal does not show again. However this does not work.

 $("#myModal").modal("show"); $("#over18").click(function(){ $("#myModal").modal("hide"); }); $("#myModal").on('hide.bs.modal', function(){ alert('The modal is about to be hidden.'); });

Answer 1

You could try something like this, to decide whether to show the modal:

// On initial page load
if (localStorage.getItem('age-verified') !== true) {
    $("#myModal").modal('show');
}

Then, if the modal shows - do something like this:

// Upon the age being confirmed
$('#footer-close').on('click', function() { // This is for illustration - handle the close event on the modal however you choose
    $("#myModal").modal('hide');
    localStorage.setItem('age-verified', true);
});

Updated - based on new code you posted

I've managed to create a working example for you. The script tags in your HTML document need to be in the same order as below. Bootstrap relies on jQuery - so that needs to be declared first.

Also to note - if you try running this example in StackOverflow's code snipped editor, it won't work - as code snippets are sandboxed, and don't have access to localStorage. You should be able to run it locally on your own computer though.

 if (localStorage.getItem('age-verified') !== true) { $('#myModal').modal('show'); $('#over18').on('click', function (e) { $('#myModal').modal('hide'); localStorage.setItem('age-verified', true); }); }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Your page content here</h1> </div> </div> </div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <a href="https://google.co.uk" class="close" role="button"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></a> <img class="img-responsive" style="margin:0 auto;" src="//cdn.shopify.com/s/files/1/0078/4449/5437/files/Flavour_Vapour_Icon_300x300.png?v=1550053751" alt=""> </div> <div class="modal-body"> <p class="modal-p">You must be at least 18 years old to enter this site.</p> </div> <div class="modal-footer"> <button type="button" id="over18" class="btn btn-default">I am 18 or older</button> <a href="https://google.co.uk" id="under18" class="btn btn-danger" role="button">I am under 18</a> </div> </div> </div> </div>

Answer 2

You can refer to the official bootstrap reference guide to do this depending on what version of bootstrap you are using. See Reference