jDialog 1.1 for jQuery - An AJAX modal creator

1.1 Changelog

- new options API
- jQuery.noconflict() compatibility
- Fixed progress bar showing when progress = false
- Added escape key to close modal window
- Tweaked the progress bar fading time
- Added default options
- Added center option to force center position on container
- Overlay color can now be specified in the options
- Overlay opacity can now be specified in the options
- Better destruction for Flash and embedded objects
- Better data structure for multiple instances

Usage Include all the neccessary javascripts <script language="javascript" type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jdialog.js"></script>

Understanding the API and defining values progress: (true|false) means display a progress bar when AJAX calls are fetching a new page
center: (true|false) mean try to center your content/container relative to your browser window width and height
method: ('GET'|'POST') use get method or post method to submit data
data: serialized data to be passed to page, i.e. date=12/24/08&page=2&content=true (hint: use $.serialize in jQuery library)
opacity: (0-1.0) opacity of the overlay background
bg: any heaxdecimal color ie. #FFFFFF for the overlay background
index: the z-index of the background
addr: loading the ajax content from this url. Must be from same exact domain (note: www.example.com != example.com)

Here are the internally default values progress: false,
center: true,
method: 'GET',
data: '',
opacity: 0.85,
bg: '#FFFFFF',
index: 2000
addr: not defined
Overiding the default values. This step is totally optional $.fn.createDialog.defaults = {
progress: false,
center: true,
method: 'GET',
data: '',
opacity: 0.85,
bg: '#FFFFFF',
index: 2000
};
Creating a dialog $("#clickme").createDialog({
addr: 'dialog.htm',
opacity: 0.9
});
Closing a dialog $.closeDialog()
note: only one dialog can be active. This function will only close current dialog
Putting it all together <script language="javascript" type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jdialog.js"></script>
<script language="javascript">

$(document).ready(function()
//you can optionally define default options{
$.fn.createDialog.defaults = {
progress: true,
center: true,
opacity: 0.7,
bg: '#FFF'
}

$("#clickme").createDialog({
addr: 'dialog.htm',
opacity: 0.9
}); });

</script>
Demo Download