To create a modal, add the class .reveal and a unique ID to a container.
Wrap this container in an <div class="reveal-overlay"></div> container.
Add a button or link to trigger the modal with data-open="exampleModal1".
<button data-open="exampleModal1">Launch Modal</button>
<a data-open="exampleModal1">Launch Modal</a>
<div class="reveal-overlay">
<div class="reveal" id="exampleModal1">
<div class="reveal-header">
<h4>This is a header</h4>
</div>
<div class="reveal-content">
<p>This is content</p>
<p>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.</p>
</div>
<button class="reveal-close" data-close="">
<span class="icon icon-close"></span>
</button>
</div>
</div>
Some modal may require only a header. Add a .text-center class to the .reveal-header element to center all text in the header section.
<button data-open="exampleModal2">Launch Modal</button>
<div class="reveal-overlay">
<div class="reveal" id="exampleModal2">
<div class="reveal-header text-center">
<div><span class="icon icon-bill-due" style="font-size: 30px; height: 50px;"></span></div>
<h4>Full Header Example</h4>
</div>
<button class="reveal-close" data-close="">
<span class="icon icon-close"></span>
</button>
</div>
</div>
Some modal may require the header section to be on the left. Add a .vertical class to the .reveal element.
<button data-open="exampleModal3">Launch Modal</button>
<div class="reveal-overlay">
<div class="reveal vertical" id="exampleModal3">
<div class="reveal-header text-center">
<div><span class="icon icon-bill-due" style="font-size: 30px; height: 50px;"></span></div>
<h4>Full Header Example</h4>
</div>
<div class="reveal-content">
<p>This is content</p>
<p>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.</p>
</div>
<button class="reveal-close" data-close="">
<span class="icon icon-close"></span>
</button>
</div>
</div>
To show the modal, you need to add these classes to the appropriate elements:
On <body> add .is-reveal-open class (prevents the user from scrolling while the modal is open)
On .reveal with ID matching data-open trigger element and it's parent .reveal-overlay add .show class.
To hide the modal, simply remove the above class.
Additional adjustments will need to be made to the top of the reveal element on launch to place it correctly on the page if the user is not at the top of page. The next major release of UITK (2.0) will include Javascript to do this for you.
By default, the modal displays with the small width. There are two more variant sizes 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 a .small, .medium, or .large class to .reveal.
By default, these modals will also scroll as their content grows. If you need the content section to scroll and not the entire model, add the class .scroll to .reveal-content.
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.
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.
<!-- Main page content -->
<div class="page-container">
<!-- All other non-fixed content goes here -->
<button class="modal-launch" data-size="medium">Launch Modal</button>
</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>
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.
Modals
The UI Toolkit provides CSS for modal components. A modal is just an empty container, so you can put any kind of content inside it, from text to forms to video to an entire grid.