Modal events

Bootstrap Modal Events

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Bootstrap modal events are a set of JS scripts that let you launch Bootstrap modals based on an action performed by a user.

"Show.bs.modal" event

This event is fired just before the modal is opened.

Launch Modal Success

Show code Edit in sandbox

JavaScript
HTML

        
            

        $("#centralModalSuccess").on('show.bs.modal', function(){
           alert("Hello World!");
        });

        
            

        <!-- Central Modal Medium Success -->
        <div class="modal fade" id="centralModalSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-notify modal-success" role="document">
            <!--Content-->
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header">
                <p class="heading lead">Modal Success</p>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true" class="white-text">&times;</span>
                </button>
              </div>

              <!--Body-->
              <div class="modal-body">
                <div class="text-center">
                  <i class="fas fa-check fa-4x mb-3 animated rotateIn"></i>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam
                    blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat.
                    Esse ratione fuga, enim, ab officiis totam.</p>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-success">Get it now <i class="far fa-gem ml-1 white-text"></i></a>
                <a type="button" class="btn btn-outline-success waves-effect" data-dismiss="modal">No, thanks</a>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!-- Central Modal Medium Success-->

        <!-- Button trigger modal -->
        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#centralModalSuccess">Launch
            Modal Success <i class="far fa-eye ml-1"></i></a>
        </div>

"Shown.bs.modal" event

This event is fired after the modal is shown.

Launch Modal Info

Show code Edit in sandbox

JavaScript
HTML

        
            
        $("#sideModalTLInfo").on('shown.bs.modal', function(){
           alert("Hello World!");
        });

        
            

        <!-- Central Modal Medium Info -->
        <div class="modal fade left" id="sideModalTLInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-notify modal-info modal-side modal-top-left" role="document">
            <!--Content-->
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header">
                <p class="heading lead">Modal Info</p>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true" class="white-text">&times;</span>
                </button>
              </div>

              <!--Body-->
              <div class="modal-body">

                <img src="https://mdbootstrap.com/wp-content/uploads/2016/11/admin-dashboard-bootstrap.webp" alt=""
                  class="img-fluid">

                <div class="text-center">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-info">Get it now <i class="far fa-gem ml-1 white-text"></i></a>
                <a type="button" class="btn btn-outline-info waves-effect" data-dismiss="modal">No, thanks</a>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!-- Central Modal Medium Info-->

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#sideModalTLInfo">Launch
            Modal Info <i class="far fa-eye ml-1"></i></a>
        </div>

"Hide.bs.modal" event

This event is fired just before the modal is hidden.

Launch Modal Danger

Show code Edit in sandbox

JavaScript
HTML

        
            
        $("#ModalDanger").on('hide.bs.modal', function(){
          alert("Hello World!");
        });

        
            

        <!-- Central Modal Danger Demo-->
        <div class="modal fade right" id="ModalDanger" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="t`rue">
          <div class="modal-dialog modal-notify modal-danger modal-side modal-top-right" role="document">
            <!--Content-->
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header">
                <p class="heading">Modal Danger</p>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true" class="white-text">&times;</span>
                </button>
              </div>

              <!--Body-->
              <div class="modal-body">

                <div class="row">
                  <div class="col-3">
                    <p></p>
                    <p class="text-center"><i class="fas fa-shopping-cart fa-4x"></i></p>
                  </div>

                  <div class="col-9">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus
                      sunt earum.</p>
                    <h2><span class="badge">v52gs1</span></h2>
                  </div>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-danger">Get it now <i class="far fa-gem ml-1 white-text"></i></a>
                <a type="button" class="btn btn-outline-danger waves-effect" data-dismiss="modal">No, thanks</a>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!-- Central Modal Danger Demo-->

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#ModalDanger">Launch Modal
            Danger <i class="far fa-eye ml-1"></i></a>
        </div>

"Hidden.bs.modal" event

This event is fired after the modal is closed.

Launch Modal Warning

Show code Edit in sandbox

JavaScript
HTML

        
            

          $("#ModalWarning").on('hidden.bs.modal', function(){
            alert("Hello World!");
        });

        
            

        <!-- Central Modal Warning Demo-->
        <div class="modal fade left" id="ModalWarning" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-notify modal-warning modal-side modal-bottom-left" role="document">
            <!--Content-->
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header">
                <p class="heading">Modal Warning</p>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true" class="white-text">&times;</span>
                </button>
              </div>

              <!--Body-->
              <div class="modal-body">

                <div class="row">
                  <div class="col-3 text-center">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).webp" alt="IMG of Avatars"
                      class="img-fluid z-depth-1-half rounded-circle">
                    <div style="height: 10px"></div>
                    <p class="title mb-0">Jane</p>
                    <p class="text-muted " style="font-size: 13px">Consultant</p>
                  </div>

                  <div class="col-9">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus
                      sunt earum.</p>
                    <p class="card-text"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
                  </div>
                </div>


              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-warning">Get it now <i class="far fa-gem ml-1 white-text"></i></a>
                <a type="button" class="btn btn-outline-warning waves-effect" data-dismiss="modal">No, thanks</a>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!-- Central Modal Warning Demo-->

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#ModalWarning">Launch Modal
            Warning <i class="far fa-eye ml-1 text-white"></i></a>
        </div>