superDialog plugin for jQuery

superDialog is a jquery plugin for showing ajax (modal) dialog box in webpages.

Features:

  • very lightweight, minified version is only 1.37 KB
  • shows loading animator while the page/data is loading
  • can show hidden element
  • can load form using ajax & submit it again using ajax
  • dialog can be closed by clicking either on overlay or the close button
  • overlay can be disabled.
  • the position of dialog is fixed, so if you scroll the page, the dialog won’t move
  • customizable css

Added in version 2.x:

  • A minimize button is added in version 2.0. When you need to open multiple dialog at the same time, you can minimize them.
  • However, you can still use it like version 1.0, if you want to.
  • Still it’s lightweight, minified version is 2.24 KB

Downlaod | Demo

Usage:

Inlcuding Necessary files:

include the latest version of jquery in your page, if not already inlcuded. then you need to inlcude the superdialog.js & superdialog.css file in your page. you can simply do these by adding following lines in your page:

<script type="text/javascript" src="path/to/jquery.min.js"></script><script type="text/javascript"></script>

Note: there are some image files in images folder. you need to be careful about the relative path of the css file & that folder. you can just keep that image folder where the css file is.

Load a page using ajax:

HTML

<a class="ajaxload" href="http://example.com/page-to-load.php">

JAVASCRIPT

<script type="text/javascript">// <![CDATA[
 $(document).ready(function(){

   $('.ajaxload').superDialog();

});
// ]]></script>

you can also send some parameter to that page-to-load-php, like

<a class="ajaxload" href="http://example.com/page-to-load.php?param=34&amp;param2=yes">

If you need to load another link in dialog box from the page that is already loaded (in this case page-to-load.php use previous class (in this case class='ajaxload' in that link. See the test.html file in your downlaoded folder if the above lines don’t make sense.

Submit a form using ajax:

HTML


<form class="ajaxform" action="path/to/form-process.php" method="GET"><input type="text" name="foo" />
<input type="text" name="bar" />

<input type="submit" value="Submit" /></form>

JAVASCRIPT

<script type="text/javascript">// <![CDATA[
 $(document).ready(function(){

   $('.ajaxform').superDialog();

});
// ]]></script>

Show a hidden element:

HTML

<div id="hiddo" style="display: none;">This div is hidden. will be shown in dialog.</div>
<a class="show" href="#" rel="#hiddo">Show It</a>

JAVASCRIPT

<script type="text/javascript">// <![CDATA[
 $(document).ready(function(){

   $('.show').superDialog();

});
// ]]></script>

So, how does this work? You click on ‘Show It’ link, it has a ‘show’ class & this class is controled by ‘superDialog’ (look at the javascript code). So, ‘superDialog’ takes what is in ‘rel’ attribute as the hidden elements id/class and shows that. if the hidden element has a ‘id’ you need to add ‘#’ before the id name in ‘rel’ attribute. And if it has a class, you need to add ‘.’ (dot) before the class name in rel attribute. That’s it.

You can however disable the overlay (the shadow around the dialog box) for all the above cases. To accomplish this, you need to write like this

<script type="text/javascript">// <![CDATA[
 $(document).ready(function(){

   $('.ajaxload').superDialog({overlay:false});

});
// ]]></script>

Version 2.0.x feature:

A dialog minimizing system has been added in Version 2.0. You can now minimize already opened dialogs. And re-open these. (Overlay will be automatically disabled when you enble minimize button.) To use this feature, just write the javascript part of the code like this:

<script type="text/javascript">// <![CDATA[
 $(document).ready(function(){

   $('.ajaxload').superDialog({minimize:true});

});
// ]]></script>

there are two other optional parameter. minimizeleft and minimizebottom these two are the position of the minimized shortcuts. defaults are 100 & 20 respectively. usage:

<script type="text/javascript">// <![CDATA[
 $(document).ready(function(){

   $('.ajaxload').superDialog({minimize:true, minimizeleft:50, minimizebottom: 20});

});
// ]]></script>

Leave a Reply