Modals

DreamHost uses remodal.js with some custom styling for modals.


Use data-remodal-target to call a data-remodal-id. Make sure to include both remodal and modal classes. The modal can be closed with <data-remodal-action="close".

<!-- Call modal -->
<button class="Button" data-remodal-target="modal">Open modal</button>

<!-- Modal -->
<div class="remodal Modal" data-remodal-id="modal">
	<h1 class="modal__heading">I'm a modal</h1>
	<p class="modal__introduction">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nemo praesentium aliquid optio labore qui, voluptate consequatur provident quos sed aperiam animi, placeat! Asperiores dicta, fuga modi temporibus laborum, culpa?</p>
	<button class="Button Button--yellow" data-remodal-action="close">Close</button> // close
	</form>
</div>