Modal

Pattern Library modals have been designed to contain a fixed-position header. This means the modal header will always be in view as the modal content is scrolled down. The header includes an optional title and a close button, as seen in the example below.

Click to open example modal 1

Code


<!-- Scripts -->
<script src="jquery-2.2.4.min.js"></script>
<script src="jquery.modal.js"></script>

<!-- Create a link that points to the modal’s id. rel="modal:open" is required to open the modal -->
<a href="#modalId" rel="modal:open">Open Modal</a>

<!-- Modal HTML, embed this directly into the document, it will be hidden until the modal is opened -->
<div id="modalId" class="cui modal-window" >
    <div class="modal-window-header">
        <h2 class="modal-window-title">Modal window title</h2>
        <a class="btn-modal-close cui btn-md primary-text" rel="modal:close">Close</a>
    </div>
    <div class="modal-window-body">
        <!-- Enter modal content here -->
    </div>
</div>

An optional call-to-action button may be placed beneath the modal title inside the fixed header, as seen in the example below.

Click to open example modal 2

Code


<!-- Scripts -->
<script src="jquery-2.2.4.min.js"></script>
<script src="jquery.modal.js"></script>

<!-- Create a link that points to the modal’s id. rel="modal:open" is required to open the modal -->
<a href="#modalId" rel="modal:open">Open Modal</a>

<!-- Modal HTML, embed this directly into the document, it will be hidden until the modal is opened -->
<div id="modalId" class="cui modal-window" >
    <div class="modal-window-header">
        <div class="header-content">
            <h2 class="modal-window-title">Modal window title</h2>
            <button class="cui btn-sm primary">Optional button</button>
        </div>
        <a class="btn-modal-close cui btn-md primary-text" rel="modal:close">Close</a>
    </div>
    <div class="modal-window-body">
        <!-- Enter modal content here -->
    </div>
</div>

The modal title is optional, as seen in the example below.

Click to open example modal 3

Code


<!-- Scripts -->
<script src="jquery-2.2.4.min.js"></script>
<script src="jquery.modal.js"></script>

<!-- Create a link that points to the modal’s id. rel="modal:open" is required to open the modal -->
<a href="#modalId" rel="modal:open">Open Modal</a>

<!-- Modal HTML, embed this directly into the document, it will be hidden until the modal is opened -->
<div id="modalId" class="cui modal-window" >
    <div class="modal-window-header">
        <a class="btn-modal-close cui btn-md primary-text" rel="modal:close">Close</a>
    </div>
    <div class="modal-window-body">
        <!-- Enter modal content here -->
    </div>
</div>

Modals are able to contain any length of content. See the example below for a modal with many lines of content.

Click to open example modal 4

Information This site is moving

Note

Modal

Modal

Code

Code

Code