the simplest modal you ever did see. – Code on GitHub »
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
This example demonstrates how visually customizable the modal is.
This example shows how resize()
can be invoked on a modal.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
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.
This example demonstrates how to disable the default methods of closing the modal:
$("#sticky").modal({
escapeClose: false,
clickClose: false,
showClose: false
});
If you do this, be sure to provide the user with an alternate method of closing the window.
This example shows how only one modal can be open at a time. If you open a new modal while an existing modal is open, the existing modal is closed first. If you need to manage state (ie: for step by step wizards) you'll need to do that yourself.