skip to Main Content
JQuery Get The Event When Bootstrap Modal Is Open?

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

<!-- 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>
            <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 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> 

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">
        $('#thecodingstuff').on('', function () {
            alert("modal open");

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.


I am a web designer and developer part-time blogger. Write something on some free time. Find my every day thought here :)

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top