picoModal-Accessible

A small, self-contained JavaScript modal library, without jQuery or another third party script, for IE8+ and all modern browsers, and accessible.

Small: 4.6kb minified, and 2k minified & gzipped, it's small and easily embeddable
No Dependencies: PicoModal does not depend on any other JS libraries, so you can use it in places where you don't have access to one
Cross-browser: It works with IE8+ and all modern browsers
Self-contained: No extra CSS or images required; just the JS
Simple: The interface is straight forward and easy to use
Customizable: By changing a few settings you can customize or completely replace the default styles and behaviour
Accessible: It's screen-reader friendly

Original idea from https://github.com/Nycto/PicoModal

Examples

Basic

You can pass the HTML content of the modal as unique argument:

picoModal("<h1>Example</h1><p>This is a simple example for picoModal. We can write something longuer or shorter or we can use Lorem Ipsum that is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>")

You can also use some arguments:

var modal = picoModal({
    content:"<h1>Example</h1><p>This is a simple example for picoModal.</p>"
  });
  modal.onClose(function() { alert("Closed") });

Change overlay style (or you can use CSS by styling .pico-overlay):

picoModal({
    content:"<h1>Example</h1><p>This is a simple example for picoModal.</p>",
    overlayStyles:{
      backgroundColor: "#169",
      opacity: 0.75
    }
  })

To disable the close button and overlay close, and give focus on the h1 (for screen-readers):

_modal = picoModal({
    content:'<h1 id="pico_title">Example</h1><p>This is a simple example for picoModal.<br><button onclick="_modal.close()">Close me</button></p>',
    closeButton:false,
    overlayClose:false,
    focusOn:"#pico_title"
  })

Settings

The following settings are available:

content: The data to display to the user
width: (a number in pixel, e.g. "400") The forced width of the modal
closeButton: Boolean whether to display the close button
closeHtml: Custom HTML content for the close button
closeStyles: A hash of CSS properties to apply to the close button
overlayClose: Boolean whether a click on the shadow should close the modal
overlayStyles: A hash of additional CSS properties to apply to the overlay behind the modal
modalStyles: A hash of additional CSS properties to apply to the modal element
focusOn: The query selector for the element into the popup where the focus must be on

Return Object Properties

The following properties are available on the object returned by picoModal:

modalElem: A reference to the modal DOM element
closeElem: A reference to the close DOM element
overlayElem: A reference to the overlay DOM element
close: A function to close the modal
onClose: A function that registers a callback to invoke when the modal is closed