the UI Dialog

If you haven't already used the jQuery UI Dialog component, I highly recommend it. It is a completely resizable and modifiable dialog box that can have a variety of transition effects. Let use a simple div tag:

<div id="uiDialog" title="some dialog box">
  <p>Here is some sample dialog text</p>
  <p>Some more dialog text</p>
</div>


then in our javascript we can create a dialog using:

$('#dialog').dialog({
  autoOpen: true,
  height: 300,
  modal: true,
  resizable: false
});

With this simple code you can create a custom dialog box. The contents are just the content of the HTML itself so all normal markup elements like links and images are fair game inside a separate dialog box. It may not seem that special but when you need to display separate content this is a very useful tool.