What is jsModal?

jsModal is a fast, small, and feature-sufficient JavaScript modal box engine. It makes things like generating modals much simpler with an easy-to-use call that works across a multitude of browsers. With a combination of limitations and constraints, jsModal will change the way that a super-minute fraction of people write JavaScript.

Who's using jsModal

Well, nobody as far as we know. Everyone seems to be using that jQeer-thingy library. Which is all good, because jsModal works seemlessly with it, and several other available libraries such as (Cow sound)-Tools and (Homer exclamation)-Joe.

A Brief Look

Launching a modal (plus draggable support)

<script>
document.getElementById('modal-1').onclick = function() {
  Modal.open({
    content: '<strong>Default modal!</strong><br />Testing the modal.<br /><br />Loreum ipsum dolorem the quick brown fox jumped over the lazy dog.<br /><br />Yes its true.',
               draggable: true,
               openCallback: function () {
                   alert('This is an example of the use of openCallback');
               }
            });
}
</script>

Using some of the other parameters

<script>
document.getElementById('modal-2').onclick = function() {
  Modal.open({
    ajaxContent: 'http://jsmodal.com/ajax-example.html',
    width: '50%', // Can be set to px, em, %, or whatever else is out there.
    height: '50%',
    hideclose: true, // Hides the close-modal graphic
    closeAfter: 10 // Define this number in seconds.
  });
}
</script>

The parameters

content: Define content here. e.g. content: 'Hello World!',
ajaxContent: Define the URL to the content (cross-domain requests not supported yet).
width:
height:
The width and height of the modal. If both or either of them is left blank, the default will be 'auto'. Make sure to include the format, i.e. '100px' or '100em' or '100%' etc.
draggable: Set this to true in order to make the Modal draggable. (touch support yet to be implemented).
closeAfter: Define the number in seconds. The modal will close after the provided time.
hideClose: Set this to true in order to hide the close graphic. The modal will still be escapable via the ESC key or clicking the overlay.
lock: Set this to true in order to make the modal unescapable and hides the close graphic. You will have to set a close trigger within the modal (or alternatively, closeAfter:). To set a close trigger, call: Modal.close();
openCallback: Allows you to pass a function to be run when the modal has been opened.
closeCallback: Allows you to pass a function to be run when upon closing of the modal.
hideOverlay: Disables the overlay if you set this to false.
Note: If you dont intend on using this, you don't have to include it at all when opening a modal.