LV Foundation provides CSS for modal components. These modals are responsive by default and capable of displaying a wide-variety of content types. They have also been pre-configured to scroll as their contents grow vertically.
Launch an example modal by clicking the button below.
To use a modal, three components will need to be available in the DOM:
.modal-overlay, used to obscure content currently visible..modal-container, used to house the modal and corresponding close-button..page-container, used to house all non-modal related content in the DOM.These components are demonstrated by the example HTML below.
<!-- Main page content -->
<div class="page-container">
<!-- All other non-fixed content goes here -->
</div>
<!-- Modal Overlay -->
<div class="modal-overlay"></div>
<!-- Modal Container -->
<div class="modal-container">
<div class="modal">
<!-- Contents of modal go here -->
</div>
<button class="modal-close">
<span class="icon icon-close"></span>
</button>
</div>
PLEASE NOTE: The .modal-close button must come AFTER the .modal element.
To show the modal, you need only add the .modal-active class to the <body> of the DOM. This implementation was chosen so as to prevent a user from scrolling while the modal is active.
To hide the modal, simply remove this class.
By default, the modal displays with the small width.
There are, however, three variant sizing that will provide a modal with a max-width. You may trigger a demonstration of each below.
To use each of these modals, simply add the .small, .medium, .large, full, or full-no-gutter classes (respectively) to .modal.
By default, these modals will also scroll as their content grows. The button below demonstrates a tall modal requiring scrolling.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.