« Disqus Pluginjsonschema 0.2 alpha »

Ok/Cancel buttons with jqModal

I recently quit using gwt and started using jQuery for a personal project of mine and I wanted to be able to show some modal dialog boxes using jQuery. As it turns out there is an easy to use plugin that does exactly this called jqModal. jqModal makes it simple to create modal dialogs by simply setting a css class on the tag you want to open the dialog and on the tag in the dialog that you want to close it.

<a href="#" class="jqModal">view</a>
...
<div class="jqmWindow" id="dialog">
<p>This is my dialog.</p>
<a href="#" class="jqmClose">Close</a>
</div>
<pre><code>
$().ready(function() {
  $('#dialog').jqm();
});
</code></pre>

That's easy but gives you a pretty minimalistic popup dialog. Any tag with the jqmClose class will simply close the dialog. What if you want to do something with OK and Cancel options? What if you want to do some fancy fade in/fade out no matter what happens? This tripped me up for a but much luckily only took about a few minutes to straiten out and test.

<a href="#" class="jqModal">Update</a>
...
<div class="jqmWindow" id="dialog">
<p>I'm going to update. Is that ok?</p>
<a href="#" class="dialogok">OK</a> <a href="#" class="jqmClose">Cancel</a>
</div>
$("#dialog #dialogok").bind("click",
  function() {
    /* Do your update logic here. */
    $('#dialog').jqmHide();
  }
);
 
var newFieldHide = function(hash) {
  hash.w.fadeOut('2000',function() { hash.o.remove(); });
};
var newFieldShow = function(hash) {
  hash.w.fadeIn("2000");
};
$("#dialog").jqm({onHide:newFieldHide, onShow:newFieldShow});

So I'm basically closing the dialog manually in the OK case and closing it automatically using the jqmClose class in the Cancel case. In both cases the onHide trigger is called and fades out the dialog.

This entry was posted on September 22nd, 2008 at 12:12:22 am and is filed under Javascript.
Tags: dialog, Javascript, jqmodal, jquery