So, one easy way of getting pretty (prettier than jqModal, anyway) modal dialog boxes is FancyBox. I've seen its distinctive "phillip's head" close button all over the place, so I'm guessing it's pretty popular.
FancyBox's boilerplate is similar to jqModal, with 2 exceptions:
- You call the "make this a dialog" on the link that refers to the div, not the div itself. I thought this was a bit counter-intuitive.
- If you use jqModal's jqmWindow class it default would tend to hide the content before it's ready, but with fancybox we tend to put the dialogs inside a div which is then hidden.
Here's the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="fancybox/jquery.fancybox-1.3.4.js"></script>
<script>
$(document).ready(function() {
$("#fancyLaunch").fancybox();
});
</script>
</head>
<body>
<a href="#fancyDialog" id="fancyLaunch">Show Dialog</a>
<div style="display:none;">
<div class="jqmWindow" id="fancyDialog">
HELLO AGAIN
</div>
</div>
</body>
</html>
So pretty much the same.
Disclaimer, I did establish that it is FancyBox (probably it's modal screen) that is interfering with other animations we have on the page, that FancyBox interferes in a way jqModal doesn't. But for simple tasks, FancyBox has the edge because it's less work to make it pretty.
No comments:
Post a Comment