image

How to dismiss modal using jquery ?

There are two ways to dismiss a modal using jQuery:

  1. Using theandnbsp;modal()andnbsp;method:
JavaScript 
$(and#39;#myModaland#39;).modal(and#39;hideand#39;);
andnbsp; This will hide the modal with the ID myModal. You can also use the class selector to hide all modals with a specific class: JavaScript 
$(and#39;.modaland#39;).modal(and#39;hideand#39;);
  1. Using theandnbsp;data-dismissandnbsp;attribute:
This attribute can be added to any element inside the modal to dismiss it when the element is clicked. For example, you could add it to a button: HTML 
button type=button class=btn btn-default data-dismiss=modalClose/button
When this button is clicked, the modal will be dismissed. Example: HTML 
div class=modal fade id=myModal
tabindex=-1role=dialogaria-labelledby=myModalLabelaria-hidden=truedivclass=modal-dialogdivclass=modal-contentdivclass=modal-headerbuttontype=buttonclass=closedata-dismiss=modalaria-label=Closespanaria-hidden=trueandamp;times;/span/buttonh4class=modal-titleid=myModalLabelModal title/h4/divdivclass=modal-body ... /divdivclass=modal-footerbuttontype=buttonclass=btn btn-defaultdata-dismiss=modalClose/buttonbuttontype=buttonclass=btn btn-primarySave changes/button/div/div/div/div JavaScript 
// Dismiss the modal when the Close button is clicked.
$(and#39;#myModaland#39;).on(and#39;clickand#39;, and#39;[data-dismiss=modal]and#39;, function() {
  $(and#39;#myModaland#39;).modal(and#39;hideand#39;);
});

// Dismiss the modal when the ESC key is pressed.
$(document).on(and#39;keydownand#39;, function(e) {
  if (e.keyCode === 27) {
    $(and#39;#myModaland#39;).modal(and#39;hideand#39;);
  }
});
You can also use jQuery to dismiss a modal programmatically, such as when a certain event occurs. For example, you could dismiss a modal when an Ajax request has completed successfully: JavaScript 
$.ajax({
  url: and#39;/submit-formand#39;,
  type: and#39;POSTand#39;,
  data: $(and#39;#formand#39;).serialize(),
  success: function() {
    $(and#39;#myModaland#39;).modal(and#39;hideand#39;);
  }
});