Modals

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Modal on Bootstrap
Example
<div class="modal fade" id="error-modal" tabindex="-1" role="dialog" aria-hidden="true"></div>
<div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 500px">
  <div class="modal-content position-relative">
    <div class="position-absolute top-0 end-0 mt-2 me-2 z-index-1">
      <button class="btn-close btn btn-sm btn-circle d-flex flex-center transition-base" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body p-0">
      <p>The Modal plugin is a dialog box/popup window that is displayed on top of the current page </p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
      <button class="btn btn-primary" type="button">Understood </button>
    </div>
  </div>
</div>
Static backdrop

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

<div class="modal fade" id="staticBackdropLabelExample" data-keyboard="false" data-backdrop="static" tabindex="-1" aria-labelledby="staticBackdropLabelExample" aria-hidden="true">
  <div class="modal-dialog modal-lg mt-6" role="document">
    <div class="modal-content border-0">
      <div class="position-absolute top-0 end-0 mt-3 me-3 z-index-1">
        <button class="btn-close btn btn-sm btn-circle d-flex flex-center transition-base" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
    </div>
  </div>
</div>
Tooltips and popovers

Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.

<div class="row">
  <div class="col">
    <h5>Popover in a modal</h5>
    <p>This <a class="btn btn-secondary popover-test" href="#" role="button" title="Popover title" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
    <h5>Tooltips in a modal</h5>
    <p><a class="tooltip-test" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip" data="data">This link</a> and <a class="tooltip-test" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip">that link</a> have tooltips on hover.</p>
  </div>
</div>
Scrolling long content

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

<div class="modal fade" id="scrollinglongcontent" data-keyboard="false" tabindex="-1" aria-labelledby="scrollinglongcontentLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="scrollinglongcontentLabel">Modal title</h5>
        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body modal-dialog modal-dialog-scrollable mt-0">
        <p>Cras mattis consectetur purus sit amet fermentum....</p>
      </div>
    </div>
  </div>
</div>

Thank you for creating with Falcon |
2021 © Themewagon

v3.0.0-beta4

customize