LegendModal
An ES6 modal class designed to make your life easier.
Features:
- Modal fades in using fancy CSS transitions
- Automatically disables page scrolling while modal is open
- Ridiculously simple to use
Getting Started:
Begin with a basic HTML file.
Your modal content can contained within DOM elements on the page or provided by a React.Component. LegendModal isn't picky.
Legend Modal Test Page Modal test! Basic Usage Invisible Overlay Limited Close Options I'm just a bunch of text! You can close this modal by pressing escape, clicking the overlay, or clicking the X button in the upper right. This modal can be closed the same as the others, but the overlay behind it is invisible! This modal can be closed by pressing the button! Close me! This modal can be closed only by pressing the X in the upper right corner! Options for this modal were set using setOptions.
Basic Usage
Constructor:
The constructor for LegendModal takes two optional arguments:
new LegendModal(content,options)
-
content
: A DOM element to be used as the content of the modal. Thedisplay
property ofcontent
will be overwritten withblock
before it is displayed to the user. -
options
: An object containing up to four boolean options which control how the modal will behave:-
visibleOverlay
: If false, the overlay behind the modal will not be visible to the user, though it will still be present. Defaults to true. -
closeOnOverlayClick
: If false, the modal will not close if the user clicks outside of the modal. Defaults to true. -
closeOnEscape
: If false, pressing the Escape key will not close the modal. This option is always false on Internet Explorer and Edge. Defaults to true. -
showCloseButton
: If true, anX
will be shown in the upper-right corner of the modal. Clicking thisX
will close the modal. Defaults to true.
-
Methods:
-
setContent(content)
: Define the content of the modal.content
: A DOM element to be used as the new content.
-
setoptions(options)
: Set or alter modal options.options
: An object containing any of the options described above.
-
showModal()
: Create a copy ofcontent
and display a modal containing it. -
closeModal()
: Close the modal and remove it from the DOM.
Note: closeModal
is invoked automatically when a click event is fired on a
DOM element with the class legend-modal-close
if that DOM element is present
in the modal body.
Code Examples
Import the class:
import LegendModal from './LegendModal';
To create and display a simple modal:
let modalOne = new LegendModal(document.getElementById('test1-div'));modalOne.showModal();
Modal with an invisible overlay:
let modalTwo = new LegendModal(document.getElementById('test2-div'),{ visibleOverlay: false});
Manually close the modal:
let modalThree = new LegendModal(document.getElementById('test3-modal'));setTimeout(() => { modalThree.closeModal();}, 5000);
Specifying a DOM element to close the modal:
Close Modal
Define options before modal content:
let modalFour = new LegendModal(null,{ closeOnEscape: false, closeOnOverlayClick: false});modalFour.setContent(document.getElementById('test4-div'));
Alter options after modal instantiation:
let modalFive = new LegendModal();modalFive.setContent(document.getElementById('test5-div'));modalFive.setOptions({ closeOnOverlayClick: true, closeOnEscape: false, visibleOverlay: true, showCloseButton: false});