background

Modals

These modular elements can be readily used and customized across pages and in different blocks.


Explore all of Stack's modular elements
at the Element Index Page ?

Basic Modal

Modals in Stack are easy to set up and trigger from any element on the page. At their most basic usage, an element with class .modal-trigger inside the same .modal-instance triggers the modal to appear.

<div class="modal-instance">
	<a class="btn modal-trigger" href="#">
		<span class="btn__text">
			TRIGGER MODAL
		</span>
	</a>
	<div class="modal-container">
		<div class="modal-content">
			MODAL CONTENT HERE
		</div>
	</div>
</div><!--end of modal instance-->
					

Autoshow Modal

Modals can be triggered automatically after a period of time once the page has been loaded by adding data-autoshow="" to the .modal-container element. The attribute requires a numerical value in milliseconds, ie. a value of 1000 would show the modal 1 second after the page has loaded.

<div class="modal-container" data-autoshow="1000">
	<div class="modal-content">
		MODAL CONTENT HERE
	</div>
</div>
					

Exit Modal

"Exit" modals can be used to draw the user's attention to a promotion or any other alert when their mouse leaves a particular element on the page. Exit modals use the data-show-on-exit attribute to set a selector matching the element where the user's mouse must exit to show the modal. This means that you could set this selector to match your "Check Out" button, the body of the page, or even a single section on your page so the modal shows when the user scrolls past it. You could also use an exit modal to draw attention back to the page when the user's mouse leaves the browser window.

<div class="modal-container" data-show-on-exit=".element-to-exit">
	<div class="modal-content">
		MODAL CONTENT HERE
	</div>
</div>
					

An "exit modal" will show immediately, each time your mouse leaves this box.

An delayed exit modal will show once only, 2 seconds after your mouse leaves this box. Click the reset button below to test again.

Test Again

Looking for styled modal sections?

View Modal Sections