jQuery Modal

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


Example 1 (simplest): Open & Close with links

  1. Embed modal HTML in document (and hide it)
  2. 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 example loads HTML with AJAX.


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