@apatheticwes/modal

0.2.1 • Public • Published

Modal

A simple, quick, and accessible modal.

Overview

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.

Getting Started

With npm: npm i @apathetic/modal

with git clone git@github.com:apathetic/modals.git

There is an ES6 module you may consume however you wish. Then:

<!-- 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>

Methods

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

Demo

After cloning the repo:

npm i
npm start

A server will spin up at http://localhost:8080, where you may play with the various examples.

Support

  • IE9+
  • Safari / Chrome
  • Firefox
  • iOS
  • Android 4.0+

Examples

Please see the test / demo directory

Release History

0.1

  • first release

Readme

Keywords

Package Sidebar

Install

npm i @apatheticwes/modal

Weekly Downloads

2

Version

0.2.1

License

MIT

Last publish

Collaborators

  • apatheticwes