Modalsv4.x

Modals afford hiding and showing extended content.

Bootstrap 4.x | Modals










Modal Trigger, as Link


<!-- Modal trigger, as button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Modal Trigger, as button
</button>

<!-- Modal trigger, as link -->
<p class='text-left'><a role='button' data-toggle="modal" data-target="#exampleModal">Modal Trigger, as Link</a></p>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero ducimus, commodi. Blanditiis recusandae non qui excepturi necessitatibus incidunt iure deserunt laudantium officia, iste autem minus cum alias suscipit! Quas, culpa.
      </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</button>
      </div>
    </div>
  </div>
</div>

This will reset the page. Are you sure?