Modals

In this page we can see how MasteFlex uses modals in order to create nice popups.

At first we need to create the HTML for our popup.

Modal HTML Markup

<div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
	<div class="modal__overlay" tabindex="-1" data-custom-close>
		<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
			<header class="modal__header">
				<h2 class="modal__title" id="modal-1-title">Micromodal</h2>
				<button class="modal__close" aria-label="Close modal" data-custom-close></button>
			</header>
			<main class="modal__content" id="modal-1-content">
				<p>Try hitting the <code>tab</code> key and notice how the focus stays within the modal itself. Also, <code>esc</code> to close modal.</p>
			</main>
			<footer class="modal__footer">
				<button class="modal__btn btn modal__btn-primary">Continue</button>
				<button class="modal__btn btn" data-custom-close aria-label="Close this dialog window">Close</button>
			</footer>
		</div>
	</div>
</div>

Lets open this modal

<a class="btn blue" data-custom-open="modal-1">OPEN MODAL</a>
OPEN MODAL

Here we have a larger modal

<div class="modal micromodal-slide large" id="modal-2" aria-hidden="true">
	<div class="modal__overlay" tabindex="-1" data-custom-close="">
		<div class="modal__container large" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
			<header class="modal__header">
				<h2 class="modal__title" id="modal-1-title">This is a larger Modal box!</h2>
				<button class="modal__close" aria-label="Close modal" data-custom-close=""></button>
			</header>
			<main class="modal__content text" id="modal-1-content">
				<p>Try hitting the <code>tab</code> key and notice how the focus stays within the modal itself. Also, <code>esc</code> to close modal. </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae vehicula purus, in volutpat est. Maecenas convallis dui diam, a iaculis ipsum tincidunt in. In suscipit magna eu urna dictum pharetra. Sed porttitor rutrum ipsum ut faucibus. Donec ac massa sed nulla euismod facilisis vitae nec erat.</p><p> Integer sed viverra libero, in varius tellus. Vestibulum rutrum, purus in dapibus dignissim, velit nisi lobortis nisi, vel mattis tellus nunc sed massa. Donec ac sem rhoncus, mollis ligula quis, bibendum dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et blandit dolor, ac gravida risus.</p><p>Cras at blandit felis. Aenean commodo mollis metus quis volutpat. Maecenas sed fringilla tellus. Proin consequat, dolor quis imperdiet pulvinar, augue enim elementum odio, sed accumsan nisl urna a est. Morbi et eros quis nisl interdum dictum. Morbi tincidunt velit nec eros finibus vestibulum et ut est. Nulla a pellentesque eros, sit amet malesuada elit. Integer accumsan odio ex. Quisque at diam tellus. Curabitur ut metus at felis pellentesque bibendum. Cras ullamcorper felis in augue posuere, nec elementum tortor eleifend. Cras volutpat sed leo nec ornare.</p>
			</main>
			<footer class="modal__footer">
				<button class="modal__btn btn small blue">Continue</button>
				<button class="modal__btn btn small red" data-custom-close="" aria-label="Close this dialog window">Close</button>
			</footer>
		</div>
	</div>
</div>

Let’s open this larger modal

<a class="btn red" data-custom-open="modal-2">OPEN LARGE MODAL</a>
OPEN LARGE MODAL