simplemodal

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