Author: | fafaz |
---|---|
Views Total: | 113 views |
Official Page: | Go to website |
Last Update: | July 20, 2018 |
License: | MIT |
Preview:

Description:
A lightweight yet easy-to-config JavaScript plugin for showing minimal clean modal windows on the webpage.
Features:
- Custom background colors of modal & overlay.
- Scrollable modal that contains tons of web content.
- Fullscreen mode.
- Simple yet useful API.
How to use it:
Link to the fafaz-Modal’s JavaScript and Stylesheet.
<link href="build/Modal.min.css" rel="stylesheet"> <script src="build/Modal.min.js"></script>
Create the modal content with a unique ID.
<div id="example" class="demo" hidden> Modal Content Here </div>
Create a trigger element pointing to the modal content.
<button class="trigger" data-modal-id="example">Launch</button>
Initialize the modal library.
var myModal = new fafaz.Modal.default('.trigger');
Open/close the modal manually.
// opens the modal myModal.open(); // close the modal myMOdal.close(); // reposition the modal // ideal for responsive design myModal.positioning();
Available options to customize the modal window.
var myModal = new fafaz.Modal.default('.trigger',{ // custom styles of the background overlay overlayStyle: undefined, // custom styles of the modal window layerStyle: undefined, // clones node cloneNode: false, // fullscreen mode fullScreen: false });
Event handlers.
myModal.on('afterOpen', function(e){ // after open } myModal.on('afterClose', function(e){ // after close } myModal.on('afterGenerate', function(e){ // after generate }