How to call jQuery function when pop-up modal is opened or closed?


I would like to call some jQuery or javascript function on opening and closing Bootstrap pop-up modal in my project, So how can i do it, Suppose below is the code for Bootstrap pop-up modal.

<!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- 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 type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>

Thanks.


Asked by:- Vinnu
0
: 130 At:- 8/29/2018 11:41:12 AM
jQuery Bootstrap pop up model call function on pop up modal close / open






1 Answers
profileImage Answered by:- Sam

For Calling jQuery function on specific modal show/hide using it's ID

//call function on modal shown
$('#myModal').on('shown.bs.modal', function (e) {
  // do something...
});

//call function on hiding modal
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

if you want to call a function on show/hide on every modal of the page, using $(window), instead of modal ID

//call function on modal shown
$(window).on('shown.bs.modal', function (e) {
  // do something...
});

//call function on hiding modal
$(window).on('hidden.bs.modal', function (e) {
  // do something...
})

that's it.

1
At:- 9/4/2018 7:53:22 AM





Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use

Subscribe Now

Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly