Monday, October 24, 2011

jqModal: flexible dialogs

A common task is putting up a "modal dialog", a box that appears over the rest of the website.

We've been having some trouble at work that might be related to the modal kit fancybox. (More on that later.) Meanwhile I've started investigating jqModal jqModal, "Minimalistic Modaling with jQuery". Besides a possible timing issue we're seeing with fancybox, I appreciate how jqModal really strips things down to the basics, while still providing some sensible look and feel defaults. Here's the example boilerplate I came up with, just grabbing the js and the css from that link:



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="jqModal.css" />
<script src="jquery.min.js"></script>
<script src="jqModal.js"></script>
<script>
$(document).ready(function() {
  $("#dialog").jqm();
});
</script>
</head>
<body>
<input type="button" onClick='$("#dialog").jqmShow()' value="show">
<div class="jqmWindow" id="dialog">
<a style="float:right;" class="jqmClose">X</a>
  HELLO AGAIN
</div>
</body>
</html>

The trick is putting the content in the div, and then blessing it with ".jqm()". Although there is a facility for turning any link into a dialog launcher, I like that the emphasis is on the programmatic launch, just calling .jqmShow() on that dialog. I did use the link-blessing pattern for the close, however.

Easy, and flexible.

2 comments:

  1. Have you looked at jqueryUI's dialog boxes? Do you like jqModal better?

    I've been using the jqueryui components because they're "more official" and more likely to be maintained, but that doesn't necessarily make them better.
    (For sure, some of their components can definitely be frustrating, especially cross-browser)

    ReplyDelete
  2. I have mixed feelings about jqueryUI: it's all in one themeroller approach... I dunno, it's a little tough to maintain, because you can lose track of what components the project included and which ones it left out etc. In general I find it's less the "do one thing, do it well" and more the "one stop shopping!" that comes more naturally to other devs I know.

    Glancing at jqueryUIs, it's cool that they have the drag and drop stuff built in.

    I just wrote up a thing on FancyBox (which I've seen a lot of places)-- it might be closer to jquery UI's stuff in terms of more functionality out of the box, while jqModal seems to be concerned with not getting in your way...

    ReplyDelete