Modal Title
This is a primary color modal.
Modals
Modals require jQuery and the Mercury UI Framework modal plugin to work. Note: You will need to initialize them by calling $().mercuryuiModal();.
You can also open and close modals via the plugin through actions by targeting the id of the modal: $('#example-modal').mercuryuiModal('open'); and $('#example-modal').mercuryuiModal('close');.
Callbacks are provided for beforeOpen, afterOpen, beforeClose, and afterClose. An example for afterOpen would be: $('#example-modal').mercuryuiModal('open', { afterOpen: function(){ alert('Modal opened!'); } });
Create custom branded modals by using the modal color mixin: @include modal-color($background-color, $title-color).
Base
<button type="button" class="button button--white open-modal" aria-controls="example-modal">
Example Modal
</button>
<div class="modal" id="example-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content margin--off">
<div class="modal--header">
<h4 aria-labelledby="example-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is a standard modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--primary-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>Sizes
<button type="button" class="button button--white open-modal" aria-controls="example-small-modal">
Small Modal
</button>
<div class="modal" id="example-small-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content modal--content--small margin--off">
<div class="modal--header">
<h4 aria-labelledby="example-small-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is a small modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--primary-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div><button type="button" class="button button--white open-modal" aria-controls="example-smaller-modal">
Smaller Modal
</button>
<div class="modal" id="example-smaller-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content modal--content--smaller margin--off">
<div class="modal--header">
<h4 aria-labelledby="example-smaller-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is a smaller modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--primary-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div><button type="button" class="button button--white open-modal" aria-controls="example-smallest-modal">
Smallest Modal
</button>
<div class="modal" id="example-smallest-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content modal--content--smallest margin--off">
<div class="modal--header">
<h4 aria-labelledby="example-smallest-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is the smallest modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--primary-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div><button type="button" class="button button--white open-modal" aria-controls="example-large-modal">
Large Modal
</button>
<div class="modal" id="example-large-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content modal--content--large margin--off">
<div class="modal--header">
<h4 aria-labelledby="example-large-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is a large modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--primary-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div><button type="button" class="button button--white open-modal" aria-controls="example-larger-modal">
Larger Modal
</button>
<div class="modal" id="example-larger-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content modal--content--larger margin--off">
<div class="modal--header">
<h4 aria-labelledby="example-larger-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is a larger modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--primary-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div><button type="button" class="button button--white open-modal" aria-controls="example-largest-modal">
Largest Modal
</button>
<div class="modal" id="example-largest-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content modal--content--largest margin--off">
<div class="modal--header">
<h4 aria-labelledby="example-largest-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is the largest modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--primary-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>Colors
<button type="button" class="button button--primary-color open-modal" aria-controls="primary-color-modal">
Primary Color Modal
</button>
<div class="modal modal--primary-color" id="primary-color-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content margin--off">
<div class="modal--header">
<h4 aria-labelledby="primary-color-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is a primary color modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--primary-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div><button type="button" class="button button--secondary-color open-modal" aria-controls="secondary-color-modal">
Secondary Color Modal
</button>
<div class="modal modal--secondary-color" id="secondary-color-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content margin--off">
<div class="modal--header">
<h4 aria-labelledby="secondary-color-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is a secondary color modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--primary-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div><button type="button" class="button button--tertiary-color open-modal" aria-controls="tertiary-color-modal">
Tertiary Color Modal
</button>
<div class="modal modal--tertiary-color" id="tertiary-color-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content margin--off">
<div class="modal--header">
<h4 aria-labelledby="tertiary-color-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is a tertiary color modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--success-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>