Falcon | Dashboard & Web App Templat

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 right-0 mt-2 mr-2 z-index-1"><button class="btn-close btn btn-sm btn-circle d-flex flex-center transition-base" data-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-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 right-0 mt-3 mr-3 z-index-1"><button class="btn-close btn btn-sm btn-circle d-flex flex-center transition-base" data-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-toggle="popover" data-placement="top" data-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-toggle="tooltip" data-placement="top" title="Tooltip" data="data">This link</a> and <a class="tooltip-test" href="#" data-toggle="tooltip" data-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.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

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

iPhone

Falcon v1.8.2

Anna Karinina

Antony Hopkins

Emma Watson

Modals

Example

Static backdrop

Tooltips and popovers

Scrolling long content