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>
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 example loads HTML with AJAX.
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.