Menu
Bootstrap modal hide is not working. Alert comes in else. but my modal is not hidden Added bootply. My issue is the same one.
<button class="button primary" id="buy" data-toggle="modal" data-target=".bs-example-modal-sm" style= "text-decoration:none;" type="button">Review and confirm</button> <div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true"> <div class="modal-bootstrap-dialog modal-sm"> <div class="modal-bootstrap-content"> <div class="modal-bootstrap-body"> -- content ---- </div> </div> </div> <div class="modal-bootstrap-footer"> <button type="submit" class="button primary" data-dismiss="modal">Close</button> <button type="submit" class="button primary">Save changes</button> </div> </div> <script type="text/javascript"> $("#buy").click(function () { var a = 4; if (a == 5) { alert("if"); $('#myModal').modal('show'); } else { alert("else"); $('#myModal').modal('hide'); } }); </script> bootply
796
Answer: Use the modal('hide') Method You can simply use the modal('hide') method to hide or close the modal window in Bootstrap using jQuery. Other related Bootstrap's modal methods are modal('show') and modal('toggle') .
BootstrapWeb DevelopmentCSS Framework. The . modal(“hide”) method in Bootstrap hides the modal. Hide the Bootstrap modal on the click of a button − $("#button1").
modal-header class is used to define the style for the header of the modal. The <button> inside the header has a data-dismiss="modal" attribute which closes the modal if you click on it. The . close class styles the close button, and the . modal-title class styles the header with a proper line-height.
To close a modal, add the w3-button class to an element together with an onclick attribute that points to the id of the modal (id01). You can also close it by clicking outside of the modal (see example below). Tip: × is the preferred HTML entity for close icons, rather than the letter "x".
You are using both modal toggling methods: via Javascript and via data attributes. So your click is firing the modal show as your data attributes set, and your Javascript does not affect this trigger.
Just remove the data attributes and go with the Javascript method:
<button class="button primary" id="buy" style="text-decoration:none;" type="button">Review and confirm</button> <div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true"> <!-- modal contents --> </div> <script type="text/javascript"> $("#buy").click(function () { var a = 4; if (a == 5) { alert("if"); $('#myModal').modal('show'); } else { alert("else"); $('#myModal').modal('hide'); } }); </script> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
