Compact Modal Window In Vanilla JavaScript – fafaz-Modal

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
}