A small, self-contained JavaScript modal library
Pull request Compare This branch is 156 commits behind Nycto:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE.md
Makefile
README.md
picoModal.js

README.md

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

Browser Support

IE7+, Chrome, FireFox, Safari and Opera

Example Code

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.",
      closeButton: true,
      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();
  };

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

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
  • 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
  • closeStyles: A hash of additional CSS properties to apply to the close button 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