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.
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.
None. All vanilla JS.
- Firefox, Webkit, Opera
- iOS, Android
|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|
Random text here, something important.
Here, we showcase one option for the placement of the "close" icon.
These aren't the droids you're looking for.
You can also close the current modal programmatically. Clicking this button will trigger the Modal hide action: