Fafaz-modal NPM

fafaz-Modal

fafaz-Modal is a lightweight modal plugin (5.17KB minified / 1.7KB gzipped)

Demo Page: https://fafaz.github.io/fafaz-modal/demo/demo.html

Instructions

common

<button class="modal-trigger" data-modal-id="test-modal">
  Click
</button>

<div id="test-modal" hidden>
  ...Your Contents
</div>

basic usage

<head>
  <link rel="stylesheet" type="text/css" href="path/Modal.min.css"  />
</head>

<body>
  .
  .
  .

  <script src="path/Modal.min.js"></script>
  <script>
    var myModal = new fafaz.Modal.default('.modal-trigger', { ... options });
  </script>
</body>

package manager + babel compiler

npm install --save fafaz-modal or yarn add fafaz-modal

import Modal from 'fafaz-modal';
import 'fafaz-modal/build/Modal.min.css';

const myModal = new Modal('.modal-trigger', { ... options });

Options

{
    overlayStyle: undefined, // ex) 'background-color: rgba(50,50,50,0.5);'
    layerStyle: undefined, // ex) 'border: 1px solid #000;'
    cloneNode: false, 
    fullScreen: false
}

Methods

var myModal = new fafaz.Modal.default('.modal-trigger');

// modal open
myModal.open();

// modal close
myMOdal.close(); 

// calculate the height of the modal, and if the height exceeds the window height, reposition.
myModal.positioning();

Events

var myModal = new fafaz.Modal.default('.modal-trigger');

myModal.on('afterGenerate', function(e) {
  // you can select container element by using e.modal
})

myModal.on('afterOpen', function(e) {
  // you can select container element by using e.modal
  // you can select trigger element by using e.trigger
})

myModal.on('afterClose', function(e) {
  // you can select container element by using e.modal
})