PicoModal

A small, self-contained JavaScript modal library

Features

Small: At just over 1.6kb, its small and easily embeddable
No Library Dependencies: PicoModal does not depend on any JS libraries, so you can use it in places where you don't have access to one.
Self-contained: No extra CSS or images required
Simple: The interface is easy to use
Customizable: Its easy to apply your own styling

Download

The latest version of PicoModal is available here: Download

Browser Support

IE7+, Chrome, FireFox, Safari and Opera

Basic Example

If all you want to do is display a modal, it's as easy as this: (Run this code)

  picoModal("Ah, the pitter patter of tiny feet in huge combat boots.");

For more control over the behaviour of the modal, you can pass in a settings object: (Run this code)

  picoModal({
      content: "Ah, the pitter patter of tiny feet in huge combat boots.",
      overlayStyles: {
          backgroundColor: "#169",
          opacity: 0.75
      }
  });

A full list of settings is documented below.

More Examples

If you need to be able to programatically close the modal you can do it like this: (Run this code)

  var modal = picoModal(
      "<p>Ah, the pitter patter of tiny feet in huge combat boots.<p>"
      + "<p><a href='#' class='dismiss'>Dismiss</a></p>"
  );

  document.getElementsByClassName("dismiss")[0].onclick = function () {
      modal.close();
  };

You can also attach an event to fire when the modal is closed: (Run this code)

  var modal = picoModal(
      "Ah, the pitter patter of tiny feet in huge combat boots."
  );

  modal.onClose(function () {
      alert("Closed");
  });

To disable the close button, and instead just rely on someone clicking outside of the modal, you can do this: (Run this code)

  picoModal({
      content: "Ah, the pitter patter of tiny feet in huge combat boots.",
      closeButton: false
  });

Or, to disable closing when someone clicks outside of the modal, you can do this: (Run this code)

  picoModal({
      content: "Ah, the pitter patter of tiny feet in huge combat boots.",
      overlayClose: false
  });

To use custom HTML for the close button, do this: (Run this code)

  picoModal({
      content: "Ah, the pitter patter of tiny feet in huge combat boots.",
      closeHtml: "<span>Close</span>",
      closeStyles: {
          position: "absolute", top: "-10px", right: "-10px",
          background: "#eee", padding: "5px 10px", cursor: "pointer",
          borderRadius: "5px", border: "1px solid #ccc"
      }
  });

Settings

The following settings are available:

content: The data to display to the user
width: 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

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

License

PicoModal is released under the MIT License, which is pretty spiffy. You should have received a copy of the MIT License along with this program. If not, see http://www.opensource.org/licenses/mit-license.php

agomat / PicoModal