Bootstrap 4 modal popup

Bootstrap 4 Modal is basically a dialog box.  Bootstrap 4 popup window that is used to provide information to the user to take actions before moving on. You can easily create very smart and flexible dialog boxes with the Bootstrap 4 modal plugin. The following example outlines the basic structure to create a simple modal with a header, body, and footer for the user.

<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">			  
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>				
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>				
</div>
</div>
</div>

Bootstrap 4

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

 

CSS

Boostrap CSS