Compact Modal Window In Vanilla JavaScript – fafaz-Modal

Category: Javascript , Modal & Popup | July 20, 2018
Views Total:113 views
Official Page:Go to website
Last Update:July 20, 2018


Compact Modal Window In Vanilla JavaScript – fafaz-Modal


A lightweight yet easy-to-config JavaScript plugin for showing minimal clean modal windows on the webpage.


  • 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

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;
// close the modal
// reposition the modal
// ideal for responsive design

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

You Might Be Interested In:

Leave a Reply