Modal.

About

There are several ways to trigger the modal (ie. programmatically, or via a click Event), as well as to dismiss the modal (programmatically, mouse Events or the escape key). You can also easily customize the default CSS for a particular interaction.

Demo

The default uses data-modal attributes as triggers for a particular modal.


<!-- modal -->
<div id="terms" class="modal">
	<div class="modal__content">
		<i class="modal__close icon-close"></i>
		<h3>Hello</h3>
		<p>Random text here, something important.</p>
	</div>
</div>

<!-- modal trigger -->
<button data-modal="#terms">show</button>

However, you can also programmatically open a particular modal by way of its querySelector.


Modal.show('#error');
Modal.hide()

Requirements

None. All vanilla JS.

Compatibility

  • IE8+
  • Firefox, Webkit, Opera
  • iOS, Android

Methods

Name args description
show querySelector (String) shows the modal that is referenced by the given querySelector
hide hides any currently-displaying modal
bind querySelector (String) programmatically binds modal functionality to an element