Modal
JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                modal: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary me-2" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
NameDescription
.modalBase class of the modal outer wrapping element
.modal.fadeApplies fade effect when opening the modal
.modal > .modal-dialogBase class of the modal element within .modal
.modal > .modal-dialog.modal-smApplies small size to the modal
.modal > .modal-dialog.modal-lgApplies large size to the modal
.modal > .modal-dialog.modal-xlApplies x-large size to the modal
.modal > .modal-dialog.modal-dialog-scrollableMakes the content of the modal scrollable
.modal > .modal-dialog.modal-dialog-centeredMakes the modal vertically centered
.modal > .modal-dialog.modal-fullscreenMakes the modal full screen
.modal > .modal-dialog > .modal-contentBase class of the actual modal content within .modal-dialog
.modal > .modal-dialog > .modal-content > .modal-headerBase class of the modal header within .modal-content
.modal > .modal-dialog > .modal-content > .modal-header > .modal-titleBase class that applies to the modal heading/title
.modal > .modal-dialog > .modal-content > .modal-header > .btn-closeBase class of the closing button of the modal
.modal > .modal-dialog > .modal-content > .modal-bodyBase class of the modal body within .modal-content
.modal > .modal-dialog > .modal-content > .modal-footerBase class of the modal footer within .modal-content
Customize variables at:/library/extend/components/_modal.scss
Component's defaults:/library/components/modal/_defaults.scss
NameDefault valueNote
$modal-inner-padding1.25rem
$modal-footer-margin-between0
$modal-dialog-margin.5rem
$modal-dialog-margin-y-sm-up1.75rem
$modal-title-line-height$line-height-base
$modal-content-colorproperty.get(modal-color)Requires @use "@library/sass/modules/property";
$modal-content-bgproperty.get(modal-background-color)Requires @use "@library/sass/modules/property";
$modal-content-border-colorproperty.get(modal-border-color)Requires @use "@library/sass/modules/property";
$modal-content-border-width$border-width
$modal-content-border-radius8px
$modal-content-inner-border-radiussubtract($modal-content-border-radius, $modal-content-border-width)
$modal-content-box-shadow-xsproperty.get(popover-shadow)Requires @use "@library/sass/modules/property";
$modal-content-box-shadow-sm-upproperty.get(popover-shadow)Requires @use "@library/sass/modules/property";
$modal-backdrop-bg$black
$modal-backdrop-opacity.5
$modal-header-border-width$modal-content-border-width
$modal-footer-border-width$modal-header-border-width
$modal-header-padding-y1.25rem
$modal-header-padding-x1.5rem
$modal-header-background-colorproperty.get(modal-header-background-color)Requires @use "@library/sass/modules/property";
$modal-header-colorproperty.get(modal-header-color)Requires @use "@library/sass/modules/property";
$modal-header-border-colorproperty.get(modal-header-border-color)Requires @use "@library/sass/modules/property";
$modal-footer-padding-y1rem
$modal-footer-padding-x1rem
$modal-footer-background-colorproperty.get(modal-header-background-color)Requires @use "@library/sass/modules/property";
$modal-footer-colorproperty.get(modal-header-color)Requires @use "@library/sass/modules/property";
$modal-footer-border-colorproperty.get(modal-footer-border-color)Requires @use "@library/sass/modules/property";
$modal-sm300px
$modal-md500px
$modal-lg700px
$modal-xl1140px
$modal-fade-transformtranslate(0, -50px)
$modal-show-transformnone
$modal-transitiontransform .3s ease-out
$modal-scale-transformscale(1.02)

Make sure to read the Customize components and Understanding and using the design system guides.

{title}