bootstrap 4:BS Modal

Bootstrap 4 Modal

Bootstrap 4 modal is a dialog box/popup window that provides either the most important information to the user or taking important information from the user.

Example

Click To See Modal Example

Modals are built with HTML, CSS, and JavaScript. It has mainly three section namely the header, body and footer. Each has its own role and importance.

General Syntax

Try it now

Source Code

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_Id"> Open modal</button>

<div class="modal" id="modal_Id">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title">Modal title</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">

        <p>Modal body text goes here.</p>

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

Try it now

Remember:In the above example data attributes data-toggle="modal" & data-target="#modalId" is used inside button.Assign modal id to the button data attribute (data-target).

Boostrap Modal Animation

To create modal animation ,use .fade class to modal container having .modal class.

Source Code

<!-- Button to Open the Modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalId">
  Open modal
</button>

<div class="modal fade" tabindex="-1" role="dialog" id="modalId">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title">Modal title</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">


          <span aria-hidden="true">&times;</span>


        </button>

      </div>

      <div class="modal-body">

        <p>Modal body text goes here.</p>

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

Try it now

Remember:To animate bootstrap modal,assign.modal to the modal container having .modal.