jQuery get the event when bootstrap modal is open?

How to get the event when Bootstrap modal is open? Many times we need the event for changing some information on modal before modal display. So let’s see, How to get the jQuery event before modal is open.

First of all, we create the simple bootstrap modal.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#thecodingstuff">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="thecodingstuff" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button></div>
<div class="modal-body">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button></div>
</div>
</div>
</div>

Above is the bootstrap modal code.

Now, On clicking the “Launch demo modal” button the bootstrap modal is open. But we need to change some information before bootstrap modal is open. So let’s, Write the jQuery event code.

<script type="text/javascript">
    $(document).ready(function(){
        $('#thecodingstuff').on('shown.bs.modal', function () {
            alert("modal open");
        })
    });
</script>

Now, before open the bootstrap modal every time the alert fire “modal open”.

So it’s too easy to get the jQuery event before the bootstrap modal open.

If you face any issue after using above code write the comment below.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s