Modal events

Bootstrap Modal Events

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

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>