Monday, October 24, 2011

FancyBox: prettier dialogs

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.

Like jqModal, you put the content somewhere on your page, and then there are 2 functions, one for telling the library what should be in a dialog, and another for launching it.

FancyBox's boilerplate is similar to jqModal, with 2 exceptions:

  1. 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.
  2. 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>
<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>
$(document).ready(function() {
<a href="#fancyDialog" id="fancyLaunch">Show Dialog</a>
<div style="display:none;">
  <div class="jqmWindow" id="fancyDialog">

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