aModal

Super lightweight and dependency free Modal built in ES6

Demo on CodePen

Installation

• Using NPM:

  npm install amodal --save

• Using Bower:

  bower install amodal --save

Include it in your project.

• The script is already compiled via Gulp, browserify and babelify. Use it with Webpack, Browserify, RequireJS or by simply including a <script> tag.

• ES 2015

  import 'amodal';

• CommonJS:

  require('amodal');

• AMD

  require(['/node_modules/amodal/dist/index.js']);

• Browser

  <script src="/node_modules/amodal/dist/index.js"></script>

Be sure to include or import the default style

• SCSS

  @import '/node_modules/amodal/dist/modal.css';

• Browser

  <link rel="stylesheet" href="/node_modules/amodal/dist/modal.css">

Create the Modal HTML

<div id="modal-1" class="modal">
	<div class="modal-inner">
		<a class="js-close-modal">&times;</a>
		<div class="modal-content">	  
			<h3>Modal Title</h3>
			<p>This is my modal content</p>			
		</div><!-- .modal-content -->
	</div><!-- .modal-inner -->
</div><!-- .modal -->

• Backdrop Support: By default, the Modal will automatically close if a click is registered on the backdrop dark overlay area underneath an open modal. You can control this behaviour by setting a boolean data attribute to your modal container.

<div id="modal-1" class="modal" data-backdrop="false">

Trigger the Modal

<a class="js-modal" data-modal="modal-1">Trigger Modal</amodal>

The script is initialized by default and detects every instance of the class js-modal. You can hook your trigger to the modal via the data attribute data-modal by specifying the modal ID.

Compatibility

This script works in all mobile & desktop browsers, as well as IE 11, 10 (not 9, sorry).

License

MIT