jQuery Modal

the simplest modal you ever did see. – Code on GitHub »

Automatic binding using HTML semantics
No images & light-weight (about 1k minified)
Simple markup makes it easy to style
Attach custom behaviour using jQuery events
Close with click or ESC key
Works in every single browser known to man (including Lynx)

Example 1 (simplest): Open & Close with links

Embed modal HTML in document (and hide it)
Create a link with rel="modal:open" and set the href attribute to the modal's DOM id.

<!DOCTYPE html>
<html>
<head>
</style>
  <!-- Don't forget to include jQuery ;) -->
  <script src="jquery.modal.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

  <!-- Modal HTML embedded directly into document -->
  <div id="ex1" style="display:none;">
    <p>Thanks for clicking.  That felt good.  <a href="#" rel="modal:close">Close</a> or press ESC</p>
  </div>

  <!-- Link to open the modal -->
  <p><a href="#ex1" rel="modal:open">Open Modal</a></p>

</body>
</html>

Demo: Open Modal

Example 2: styled login form & events

Demo: Login!

Example 3: resizing

This example shows how resize() can be invoked on a modal.

Example 4: AJAX

This first example uses rel="modal:open" to automatically load the page contents into a modal via AJAX:

<a href="ajax.html" rel="modal:open">example</a>

This second example shows how you can manually load AJAX pages into a modal. Note that the AJAX response must be wrapped in a div with class modal:

<!-- Normal link -->
<a href="ajax.html" id="manual-ajax">second example</a>

// Open modal in AJAX callback
$('#manual-ajax').click(function(event) {
  event.preventDefault();
  $.get(this.href, function(html) {
    $(html).appendTo('body').modal();
  });
});

<!-- AJAX response must be wrapped in the modal's root class. -->
<div class="modal">
  <p>Second AJAX Example!</p>
</div>

If you want more spinner styles, check out ajaxload.info.

Example 5: the un-closable window

This example demonstrates how to disable the default methods of closing the modal:

 $("#sticky").modal({
  escapeClose: false,
  clickClose: false,
  showClose: false
});