A small, self-contained JavaScript modal library

• 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

The latest version of PicoModal is available here: Download

IE7+, Chrome, FireFox, Safari and Opera

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.

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();
  };

More options!

  var modal = picoModal({
      content: htmlElement,
      autoOpen: false,
      autoDestroy: false,
      width: 500,
      closeButton: false
  });
  modal.open();
  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"
      }
  });

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

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
• open: A function to open the modal
• close: A function to close the modal
• destroy: A function to remove the modal and inside content
• onClose: A function that registers a callback to invoke when the modal is closed

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