simplemodal

1.0.2 • Public • Published

Simple Modal

A Javascript plugin to save rewriting modal popup code over and over.

Core functionality

This plugin should:

  • Build a modal element and add it to the page
  • Add any classes specified in the className option to the modal
  • If the closeButton option is true, add a close button
  • If the content option is a HTML string, set it as the modal’s content
  • If the content option is a domNode, set it’s interior content as the modal’s content
  • Set the modal’s maxWidth and minWidth respectively
  • Add an overlay if the overlay option is true
  • When opened, add a modal-open class that we can use with our CSS to define an open state.
  • When closed, remove the modal-open class.
  • If the modal’s height exceeds the viewport’s height, also add a modal-anchored class so that we can handle that scenario

Road map

  • Add the ability to close modal with ESC key
  • Add library of animations that can be added to the popup
  • Be able to customize close button

Usage

var Modal = require('simplemodal');
var myModal = new Modal({
 
  // Can be a string or reference an ID
  content: myContent,
 
  // Defaults
  className: 'fade-and-drop',
  closeButton: true,
  maxWidth: 600,
  minWidth: 280,
  overlay: true
});

Settings

Option Type Default Description
className string 'fade-and-drop' Adds animation class
closeButton boolean true Turns close button on/off
maxWidth int 600 Sets max width of modal
minWidth int 280 Sets min width of modal
overlay boolean true Turns overlay on/off

Dependencies (0)

    Dev Dependencies (1)

    Package Sidebar

    Install

    npm i simplemodal

    Weekly Downloads

    4

    Version

    1.0.2

    License

    ISC

    Last publish

    Collaborators

    • chriskinch
    • peps84
    • willhowlett
    • cllamas