Introduction:

jQuery Simple Dialog is a lightweight jQuery plugin that provides a simple interface to create a modal dialog.

Try out a demonstration

Setup:

Include the script and stylesheets in your document (you will need to make sure the css and js file are on your server, and adjust the paths in the script and link tag)

<link href="jquery.simpledialog.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.simpledialog.js"></script>

Usage:

Starting with jQuery Simple Dialog is really easy!

Javascript

$(document).ready(function () {
  $('.simpledialog').simpleDialog();
});

$(document).ready(function () {
  $('.simpledialog').simpleDialog({
    opacity: 0.3,
    duration: 500,
    title: 'Simple Dialog',
    open: function (event) {
      console.log('open!');
    },
    close: function (event, target) {
      console.log('close!');
    }
  });
});

HTML

Show hidden content.

<a href="#" rel="dialog_content" class="simpledialog">show dialog!</a>

<!-- content -->
<div id="dialog_content" style="display:none;">
  <h3>DEMO</h3>
  <p>This is a demonstration of jQuery SimpleDialog.</p>
</div>

Add link manually to close dialog. See closeSelector option.

<a href="#" rel="dialog_content" class="simpledialog">show dialog!</a>

<div id="dialog_content" style="display:none;">
  <h3>DEMO</h3>
  <p>This is a demonstration of jQuery SimpleDialog.</p>
  <a href="#" class="close">close</a>
</div>

Image

<a href="/image/large_picture.gif" class="simpledialog"><img src="/image/thumbnail.gif" /></a>

If useTitleAttr is true, title attribute will be picture's caption.

<a href="/image/large_picture.gif" class="simpledialog" title="This will be dialog's title">
  <img src="/image/thumbnail.gif" />
</a>

If showCaption is true, title attribute will be picture's caption.

<a href="/image/large_picture.gif" class="simpledialog">
  <img src="/image/thumbnail.gif" title="This will be dialog's caption" />
</a>

AJAX (Link)

<a href="/dialog/show/" class="simpledialog">show dialog!</a>

AJAX (Form)

Bind to form tag.

<form action="/dialog/show/" method="GET" class="simpledialog">
  <input type="submit" value="show dialog!" />
</form>

Bind to submit button.

<form action="/dialog/show/" method="GET">
  <input type="submit" value="show dialog!" class="simpledialog" />
</form>

Options

Event

Method

$.simpleDialog.close

close dialog from everywhere.

Sample Markup

<div class="sd_overlay"></div>
<div id="sd_container" class="sd_container">
   <div class="sd_header"></div>
   <div class="sd_content"></div>
   <div class="sd_footer"></div>
</div>

Release Notes

2009-08-08 - 0.1.1

• Fixed problem where callback function can't see modified dialog content.

2009-07-19 - 0.1.0

• Added many options.
• Added animation effect.
• Added public method (to close dialog from everywhere).
• Updated css file (including indicator.gif).

2009-07-07 - 0.0.2

• Added open/close event functions.
• Added min/pack files.
• Added css file.

2009-07-06 - 0.0.1