Who?
jqModal

Minimalist Modaling with jQuery


What?

jqModal is a plugin for jQuery to help you display modals, popups, and notices. It is flexible and tiny, akin to a "Swiss Army Knife", and provides a great base for your windowing needs.

Features;

Why?

There is no shortage of dialog scripts that dazzle their audience. Some will try to walk your dog. They can be rooted in unnecessary effects, rigid, and cumbersome. This is not where jqModal is headed! I wanted to write a simple modal framework. Something lightweight yet powerful and flexible. The original strived to resemble an assembly demoscene binary. Since r16 jqModal is readable and community maintainable.

If you like jqModal, please consider a dontation to support its development:

When?

Current Version: 1.4.0 2015.08.16 +r25
Copyright © 2007-2023 Brice Burgess - released under both the MIT and GPL licenses.

Where?

Download the Plugin (jqModal.js) [jQuery >= 1.2.3]
Download the Styling (jqModal.css)

[SOURCECODE] · [CHANGELOG] · [RELEASES]

[OPTIONAL] Drag'n'Resize Plugin (jqDnR.js - 874 bytes) - any other drag & drop plugin will work.

Image Caching NOTE; Some browsers do not preload background images and image elements if they are hidden which can effect the responsiveness of your dialogs. This page uses an OPTIONAL workaround to get around this issue. It preloads dialog decoration images for faster display. See the code used by clicking the HTML tab below;
HTML 
<!-- optional: image cacheing. Any images contained in this div will be
	loaded offscreen, and thus cached -->

<style type="text/css">
/* Caching CSS created with the help of;
	Klaus Hartl <klaus.hartl@stilbuero.de> */
@media projection, screen {
     div.imgCache { position: absolute; left: -8000px; top: -8000px; }
     div.imgCache img { display:block; }
}
@media print { div.imgCache { display: none; } }
</style>

<div class="imgCache">
	<img src="inc/busy.gif" />
	<img src="img/dialog/close.gif" />
	<img src="img/dialog/sprite.gif" />
	<img src="img/dialog/bl.gif" />
	<img src="img/dialog/br.gif" />
	<img src="img/dialog/bc.gif" />
	<img src="img/notice/note_icon.png" />
	<img src="img/notice/close_icon.png" />
</div>
Test for Internet Explorer 6:
How?

Usage

1. Add modal element(s) to your page
Modal elements are usually <div> containers with their visibility set to hidden. CSS is used for styling and position. Modals are displayed("shown") when a trigger event occurs. Their contents can be inline (hardcoded in the HTML) or added via ajax when the modal is shown.
2. Initialize your modal(s)
Modal elements must be initialized via $.jqm() before they can be shown. You can customize your modals by passing an options object (e.g. $('#modal').jqm({modal: true, trigger: 'a.showModal'});).

NOTE: $.jqm() is usually called ONCE per modal. Subsequent calls to $.jqm() will update the modal(s) options using jQuery.extend().

3. Trigger your modal
Modals are shown when a "trigger" element is clicked, or manually triggered via $('#modal').jqmShow().

Functions

jqm
Initialize element(s) as modals. Accepts an options object. If a modal is already initialized, the call will update its options via jQuery.extend().

$('#dialog').jqm();
$('.dialogs').jqm({ajax:'@href',modal:true});

jqmShow
Show modal element(s). Will not execute on opened modals.

$('#dialog').jqmShow();
$('.dialogs').jqmShow();

jqmHide
Hide modal element(s). Will not execute on closed modals.

$('#dialog').jqmHide();
$('.dialogs').jqmHide();

jqmAddTrigger
Called on a modal(s). Passed element(s) will show the modal(s) when clicked. Accepts;
  • (string) A jQuery Selector
  • (object) A jQuery Collection
  • (object) A DOM element

$('#dialog').jqmAddTrigger('.openDialog');
$('.dialogs').jqmAddTrigger($('#openDialogs a'));

jqmAddClose
Called on a modal(s). Passed element(s) will close the modal(s) when clicked. Accepts;
  • (string) A jQuery Selector
  • (object) A jQuery Collection
  • (object) A DOM element

$('#dialog').jqmAddClose('.hideDialog');
$('.dialogs').jqmAddClose($('#hideDialogs a'));

Defaults

$.jqm.params
Default option values passed to all modals. Override by altering or providing your own.
$.jqm.focusFunc
The "focus function" called whenever modal:true dialogs are active. Alter behavior by overloading.

Options

Options allow tailoring the behavior of modals.
overlay
The overlay transparency as a percentage. If 0 the overlay is disabled and the page behind the modal will remain interactive. If 100 the overlay will be 100% opaque.

(integer) - default: 50

overlayClass
Name of CSS class applied to the overlay.

(string) - default: 'jqmOverlay'

closeClass
Child elements of the modal with a CSS class of closeClass will close the modal when clicked.

(string|false) - default: 'jqmClose'

trigger
Elements matching trigger will show the modal when clicked. Triggers can be;
  • (string) A jQuery Selector
  • (object) A DOM element (e.g. $.jqm({trigger: document.getElementByID("showDialog")})
  • (false) The call to $.jqm() will not attach trigger events to elements.

(string|object|false) - default: '.jqModal'

ajax
Remotely loads the modal contents. You can pass the URL (e.g. $.jqm({ajax:'remote/dialog.html'}) or extract it from an attribute of the triggering element. For instance, $(.jqm({ajax:'@href'}) would grab contents from `foo/bar.html` if the triggering element was <a href="foo/bar.html">Open Modal</a>. If a more complicated routine is desired, use the onShow() and/or onLoad() callback. As of jqModal 1.3, ajax modals are immediately shown.

(string|false) - default: false

target

NOTE: target is applicable only if the ajax parameter is passed.

Child element(s) of the modal whose contents are replaced with the ajax response. If false, the entire modal contents will be replaced. Target can be;
  • (string) A jQuery Selector
  • (object) A DOM element (e.g. $.jqm({target: $('#dialog div.contents')[0]})
  • (false) ajax return overwrites dialog's innerHTML

(string|false) - default: false

ajaxText

NOTE: ajaxText is applicable only if the ajax parameter is passed.

Optionally replace the contents of the ajax target with the supplied string when ajax modals are triggered. May include HTML (such as an loading image). Will be replaced with server response when received. E.g. $.jqm({ajaxText: '<marquee style="width: 1.5em;">.. ... .</marquee>'});

(string|false) - default: false

modal
Restricts input (mouse clicks, keypresses) to the modal. If false, and if overlay is enabled, clicking the overlay will close the modal.

(boolean) - default: false

toTop
When true; places the dialog element as a direct child of <body> when shown. This was added to help overcome z-Index stacking order issues.
See the toTop demo to learn what to do if your overlay covers the entire page *including* the modal dialog!

(boolean) - default: false

[Callbacks]
Callbacks allow advanced customization of jqModal dialogs. Each callback is passed the "hash" object consisting of the following properties;
  • w: (jQuery object) The modal element
  • c: (object) The modal's options object
  • o: (jQuery object) The overlay element
  • t: (DOM object) The triggering element
onShow (callback)
Called when a modal is to be shown. Responsible for showing a modal and overlay.

$('#dialog').jqm({
onShow: function(hash) {
hash.o.prependTo('body');
hash.w.css('opacity',0.88).fadeIn();
}});

(function|false) - default: false

From jqModal.js >
// onShow callback. Responsible for showing a modal and overlay.
//  return false to stop opening modal.

// hash object;
//  w: (jQuery object) The modal element
//  c: (object) The modal's options object
//  o: (jQuery object) The overlay element
//  t: (DOM object) The triggering element

// display the overlay (prepend to body) if not disabled
if(hash.c.overlay > 0)
  hash.o.prependTo('body');

// make modal visible
hash.w.show();

// call focusFunc (attempts to focus on first input in modal)
$.jqm.focusFunc(hash.w,null);

return true;
}
onHide (callback)
Called when a dialog is to be hidden. Responsible for hiding a modal and overlay.

$('#dialog').jqm({
onHide: function(hash) {
hash.w.fadeOut('2000',function(){ hash.o.remove(); });
}});

(function|false) - default: false

From jqModal.js >
onHide = function(hash){
// onHide callback. Responsible for hiding a modal and overlay.
//  return false to stop closing modal.

// hash object;
//  w: (jQuery object) The modal element
//  c: (object) The modal's options object
//  o: (jQuery object) The overlay element
//  t: (DOM object) The triggering element

// hide modal and if overlay, remove overlay.
hash.w.hide() && hash.o && hash.o.remove();

return true;
}
onLoad (callback)
Called right after ajax content is loaded.

// onLoad : assign Mike Alsup's most excellent ajaxForm plugin to the returned form element(s).
var myLoad = function(hash){ $('form',hash.w).ajaxForm(); };
$('#dialog').jqm({onLoad:myLoad});

(function|false) - default: false

Examples

1. Defaults -- view
Out-of-box behavior. The window and its content is taken "inline" from the element with an ID of 'dialog'. The dialog is "triggered" (shown) when element(s) with class jqModal are clicked. No parameters are passed, no fancy window decorations used.
Close
READ ME --> This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this. The demonstrations on this page will show off a few possibilites. I recommend walking through each one to get an understanding of jqModal before using it.

You can view the sourcecode of examples by clicking the Javascript, CSS, and HTML tabs. Be sure to checkout the documentation too!

NOTE; You can close windows by clicking the tinted background known as the "overlay". Clicking the overlay will have no effect if the "modal" parameter is passed, or if the overlay is disabled.
Javascript 
$().ready(function() {
  $('#dialog').jqm();
});
CSS 
/* jqModal base Styling courtesy of;
  Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
  the Window's z-index value will be set to 3000 by default (in jqModal.js). You
  can change this value by either;
    a) supplying one via CSS
    b) passing the "zIndex" parameter. E.g.  (window).jqm({zIndex: 500}); */
  
.jqmWindow {
    display: none;
    
    position: fixed;
    top: 17%;
    left: 50%;
    
    margin-left: -300px;
    width: 600px;
    
    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay { background-color: #000; }

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
HTML 
<a href="#" class="jqModal">view</a>
...
<div class="jqmWindow" id="dialog">

<a href="#" class="jqmClose">Close</a>
<hr>
<em>READ ME</em> -->
This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this.
The demonstrations on this page will show off a few possibilites. I recommend walking
through each one to get an understanding of jqModal <em>before</em> using it.

<br /><br />
You can view the sourcecode of examples by clicking the Javascript, CSS, and HTML tabs.
Be sure to checkout the <a href="README">documentation</a> too!

<br /><br />
<em>NOTE</em>; You can close windows by clicking the tinted background known as the "overlay".
Clicking the overlay will have no effect if the "modal" parameter is passed, or if the
overlay is disabled.
</div>
2. AJAX -- view
This example demonstrates the ajax parameter. The window's content is pulled from a remote source (Relative URL: examples/2.html) when its trigger is clicked. The trigger parameter is used assign a "show trigger" to element(s) with class ex2trigger.
Please wait... loading
Javascript 
$().ready(function() {
  $('#ex2').jqm({ajax: 'examples/2.html', trigger: 'a.ex2trigger'});
});
CSS 
/* jqModal base Styling courtesy of;
  Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
  the Window's z-index value will be set to 3000 by default (in jqModal.js). You
  can change this value by either;
    a) supplying one via CSS
    b) passing the "zIndex" parameter. E.g.  (window).jqm({zIndex: 500}); */
  
.jqmWindow {
    display: none;
    
    position: fixed;
    top: 17%;
    left: 50%;
    
    margin-left: -300px;
    width: 600px;
    
    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay { background-color: #000; }

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
HTML 
<a href="#" class="ex2trigger">
...
<div class="jqmWindow" id="ex2">
Please wait... <img src="inc/busy.gif" alt="loading" />
</div>
3. Styling -- a. view (dialog), b. view (alert), c. view (notice)
This example demonstrates the ease in which stylish windows are constructed. All HTML and CSS is abstracted from the plugin which allows a designer unprecedented flexibility. Notice how custom overlays, ajax targets, and callbacks are used. I hope to eventually provide a repository of dialog themes. Interested in contributing? -- see note @ bottom of page.

Dialog Title
Styled windows or dialogs are easy!

This particular theme was done for poMMo -- feel free to borrow the styling, or use it as a reference when creating your own. CSS and Markup is available under the HTML + CSS tabs of example 3a.
Javascript 
$().ready(function() {
  $('#ex3a').jqm({
    trigger: '#ex3aTrigger',
    overlay: 30, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
    overlayClass: 'whiteOverlay'})
    .jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
  
  // Close Button Highlighting. IE doesn't support :hover. Surprise?
  $('input.jqmdX')
  .hover(
    function(){ $(this).addClass('jqmdXFocus'); }, 
    function(){ $(this).removeClass('jqmdXFocus'); })
  .focus( 
    function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); })
  .blur( 
    function(){ $(this).removeClass('jqmdXFocus'); });

});
CSS 
div.whiteOverlay { background: url(inc/jqmBG.gif) white; }
div.jqDrag {cursor: move;}

/* jqmModal dialog CSS courtesy of;
  Brice Burgess <bhb@iceburg.net> */

div.jqmDialog {
  display: none;
    
    position: fixed;
    top: 17%;
    left: 50%;
    
    margin-left: -200px;
  width: 400px;

  overflow: hidden;
  font-family:verdana,tahoma,helvetica;
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html div.jqmDialog {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}


/* [[[ Title / Top Classes ]]] */
div.jqmdTC { 
  background: #d5ff84 url(img/dialog/sprite.gif) repeat-x 0px -82px; 
  color: #528c00;
  padding: 7px 22px 5px 5px;
  font-family:"sans serif",verdana,tahoma,helvetica;
  font-weight: bold;
  * zoom: 1;
}
div.jqmdTL { background:  url(img/dialog/sprite.gif) no-repeat 0px -41px; padding-left: 3px;}
div.jqmdTR { background: url(img/dialog/sprite.gif) no-repeat right 0px; padding-right: 3px; * zoom: 1;}


/* [[[ Body / Message Classes ]]] */
div.jqmdBC {
  background: url(img/dialog/bc.gif) repeat-x center bottom;
  padding: 7px 7px 7px;
  height: 180px;
  overflow: auto;
}
div.jqmdBL { background: url(img/dialog/bl.gif) no-repeat left bottom; padding-left: 7px; }
div.jqmdBR { background: url(img/dialog/br.gif) no-repeat right bottom; padding-right: 7px; * zoom: 1 }

div.jqmdMSG { color: #317895; }


/* [[[ Button classes ]]] */
input.jqmdX {
  position: absolute;
  right: 7px;
  top: 4px;
  padding: 0 0 0 19px;
  height: 19px;
  width: 0px;
  background: url(img/dialog/close.gif) no-repeat top left;
  overflow: hidden;
}
input.jqmdXFocus {background-position: bottom left; outline: none;}

div.jqmdBC button, div.jqmdBC input[type="submit"] {
  margin: 8px 10px 4px 10px;
  color: #777;
  background-color: #fff;
  cursor: pointer;
}

div.jqmDialog input:focus, div.jqmDialog input.iefocus { background-color: #eaffc3; }
HTML 
<a href="#" id="ex3aTrigger">view</a> (dialog)
...
<div id="ex3a" class="jqmDialog">
<div class="jqmdTL"><div class="jqmdTR"><div class="jqmdTC jqDrag">Dialog Title</div></div></div>
<div class="jqmdBL"><div class="jqmdBR"><div class="jqmdBC">

<div class="jqmdMSG">
Styled windows or dialogs are easy!
 
<br /><br />
This particular theme was done for <a href="http://www.pommo.org">poMMo</a> --
feel free to borrow the styling, or use it as a reference when creating your own.
CSS and Markup is available under the HTML + CSS tabs of example 3a.
</div>

</div></div></div>
<input type="image" src="img/dialog/close.gif" class="jqmdX jqmClose" />
</div>
  3a (dialog) - custom overlay, draggable window.

Did you know?

Close

Please wait... loading

Javascript 
$().ready(function() {
  
  // select + reference "triggering element" -- will pass to $.jqm()
  var triggers = $('a.ex3bTrigger')[0];
  
  // NOTE; we could have used document.getElementById(), or selected
  //  multiple elemets with $(..selector..) and passed the trigger
  //  as a jQuery object. OR, just include the string '#ex3btrigger' 
  //  as the trigger parameter (as typically demonstrated).
  
  //  NOTE; we supply a target for the ajax return. This allows us
  //   to keep the structure of the alert window. An element can 
  //   also be passed (see the documentation) as target.
  
  $('#ex3b').jqm({
    trigger: triggers,
    ajax: 'examples/3b.html',
    target: 'div.jqmAlertContent',
    overlay: 0
    });
});
CSS 
/* jqModal alert CSS courtesy of;
   Alexandre Plennevaux <alexandre@pixeline.be>,
   Brice Burgess <bhb@iceburg.net> */


div.jqmAlert { /* contains + positions the alert window */
  display: none;
  
  position: fixed;
  top: 17%;
  width: 100%;
}
    
/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html div.jqmAlert {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}

div.jqmAlertWindow {
  height:auto;
  width: auto;
  margin: auto;
  
  max-width:400px;
  padding: 0 10px 10px;
  
  background:#111;
  border:1px dotted #FFF;
}

.jqmAlertTitle{
  margin:5px 2px;
  height:20px;
  color:#FFF;
  background:#000;
}
.jqmAlertTitle h1{
  margin:5px 2px;
  padding-left:5px;
  padding:0;
  font-size:14px;
  text-transform:capitalize;
  letter-spacing:-1px;
  font-weight:bold;
  color:#FFF;

  float:left;
  height:20px;
}

div.jqmAlert .jqmClose em{display:none;}
div.jqmAlert .jqmClose {
  width:20px;
  height:20px;
  display:block;
  float:right;
  clear:right;
  background:transparent url(img/alert/close_icon_double.png) 0 0 no-repeat;
}

div.jqmAlert a.jqmClose:hover,div.jqmAlert a.jqmCloseHover{ background-position: 0 -20px; }

div.jqmAlertContent{
  border-top:px;
  color:#FFF;
  font:11px/14pt arial;
  padding:5px 20px 5px;
  margin:5px;
  border:1px dotted #111;
  letter-spacing:0px;
  background:#111 url(img/alert/darkgrid.png);
}

/*°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°
  clearing a float without additional markup
   http://www.positioniseverything.net/easyclearing.html */

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
HTML 
<a href="#" class="ex3bTrigger">view</a> (alert)
...
<div class="jqmAlert" id="ex3b">

<div id="ex3b" class="jqmAlertWindow">
    <div class="jqmAlertTitle clearfix">
    <h1>Did you know?</h1><a href="#" class="jqmClose"><em>Close</em></a>
  </div>
  
  <div class="jqmAlertContent">
  <p>Please wait... <img src="inc/busy.gif" alt="loading" /></p>
  </div>
</div>

</div>
  3b (alert) - ajax target.

Did you know?

Pine, spruce, or other evergreen wood should never be used in barbecues. These woods, when burning or smoking, can add harmful tar and resins to the food. Only hardwoods should be used for smoking and grilling, such as oak, pecan, hickory, maple, cherry, alder, apple, or mesquite, depending on the type of meat being cooked.

close resize
Javascript 
// this example shows the use of onShow and onHide callbacks. Make
// sure to read the documentation for futher instructions, and
// an explanation of the "hash" argument.

$().ready(function() {
  $('#ex3c')
    .jqDrag('.jqDrag')
    .jqResize('.jqResize')
    .jqm({
      trigger:'#ex3cTrigger',
      overlay: 0,
      onShow: function(h) {
        /* callback executed when a trigger click. Show notice */
        h.w.css('opacity',0.92).slideDown(function(){ if(h.o) h.o.show(); });
      },
      onHide: function(h) {
        /* callback executed on window hide. Hide notice, overlay. */
        h.w.slideUp("slow",function() { if(h.o) h.o.remove(); });
      } 
      });
});
CSS 
div.jqmNotice img.jqResize {position: absolute; right: 2px; bottom: 2px;}

/* Notice CSS courtesy of;
   Alexandre Plennevaux <alexandre@pixeline.be>,
   Brice Burgess <bhb@iceburg.net> */

div.jqmNotice {
    display: none;
    
    position: relative;
    
    width: 320px;
  background:#FFFFCC url(img/notice/note_icon.png) 5px 5px no-repeat;
    border: 1px solid #000;
    padding: 0;
}

.jqmnTitle{margin: 0 25px;}
  
.jqmnTitle h1{
  margin: 5px 0;
  padding-left:5px;
  width: 100%;
  
  font-size:10px;
  color:#FFFFCC;
  background-color:#505050;
}

div.jqmNotice .jqmClose {
  position: absolute;
  cursor: pointer;
  right: 4px;
  top: 6px;
}

.jqmnContent{
  border-top:1px;
  color:#000;
  font:12px/18pt Comic Sans, Comic Sans MS, cursive;
  padding:0 20px 5px;
}
HTML 
<a href="#" id="ex3cTrigger">view</a> (notice)
...
<div style="position: absolute; margin: -100px 0 0 100px;">
<div id="ex3c" class="jqmNotice">
    <div class="jqmnTitle jqDrag">
      <h1>Did you know?</h1>
    </div>
  
  <div class="jqmnContent">
  <p>Pine, spruce, or other evergreen wood should never be used in barbecues. These woods, when burning or smoking, can add harmful tar and resins to the food. Only hardwoods should be used for smoking and grilling, such as oak, pecan, hickory, maple, cherry, alder, apple, or mesquite, depending on the type of meat being cooked.</p>
  </div>
  
  <img src="img/notice/close_icon.png" alt="close" class="jqmClose" />
  <img src="img/dialog/resize.gif" alt="resize" class="jqResize" />
</div>
</div>
  3c (alert) - onShow, onHide callbacks.

4. Modal, Nested Modal -- a. view (4a.html), b. view (4b.html)
Focus can be forced on a dialog, making it a true "modal" dialog. The $.jqm.focusFunc is called to lock activity to the active modal. This example also exhibits the ajax attribute selector (using @href). Any DOM attribute can be used to extract the ajax url (see the documentation).
Modal Dialog

Please wait... loading

Modal Dialog

You bet!

Notice that you can only interact with this modal. If you click outside of it, focus will return to the form input element.

When this window is closed, the focus lock will resume on the calling modal window. This will repeat until there are no more modals open.

Use the "z-index" to control overlay and window overlap. See the documentation.

Javascript 
$().ready(function() {
  
  // notice that you can pass an element as the target 
  //  in addition to a string selector.
  var t = $('#ex4 div.jqmdMSG');
  
  $('#ex4').jqm({
    trigger: 'a.ex4Trigger',
    ajax: '@href', /* Extract ajax URL from the 'href' attribute of triggering element */
    target: t,
    modal: true, /* FORCE FOCUS */
    onHide: function(h) { 
      t.html('Please Wait...');  // Clear Content HTML on Hide.
      h.o.remove(); // remove overlay
      h.w.fadeOut(888); // hide window
      
    },
    overlay: 0});
  
   // nested dialog
   $('#ex4c').jqm({modal: true, overlay: 10, trigger: false});
   
  // Close Button Highlighting Javascript provided in ex3a.
});
CSS 
/* jqmModal dialog CSS inherited from Example 3a ... */

div.jqmdAbove { z-index: 5000; top: 8%; } /* used by 4c -- nested modal */

div.jqmdWide { width: 560px; margin-left: -280px; }
div.jqmdTall { height: 330px; }


div.centered { width: 100%; text-align: center; }
div.buttons input{ margin: 10px 14px; }
div.output { margin: 10px; color: red; }

.largeText { font-size: 120%; font-weight: bold; }
.smallText { font-size: 85%; }
HTML 
<a href="examples/4a.html" class="ex4Trigger">view</a> (4a.html)
 <a href="examples/4b.html" class="ex4Trigger">view</a> (4b.html)
...
<div id="ex4" class="jqmDialog jqmdWide">
<div class="jqmdTL"><div class="jqmdTR"><div class="jqmdTC">Modal Dialog</div></div></div>
<div class="jqmdBL"><div class="jqmdBR"><div class="jqmdBC">

<div class="jqmdMSG">
<p>Please wait... <img src="inc/busy.gif" alt="loading" /></p>
</div>

</div></div></div>
<input type="image" src="img/dialog/close.gif" class="jqmdX jqmClose" />
</div>


<!-- nested dialog -->
<div id="ex4c" class="jqmDialog jqmdAbove">
<div class="jqmdTL"><div class="jqmdTR"><div class="jqmdTC">Modal Dialog</div></div></div>
<div class="jqmdBL"><div class="jqmdBR"><div class="jqmdBC jqmdTall">

<div class="jqmdMSG">
<p class="largeText">You bet!</p>

<p>Notice that you can only interact with this modal.
If you click outside of it, focus will return to the form input element.
</p>

<input type="text" size="15" value="I get focus"/>
<input type="text" size="15" value=""/>

<p>
When this window is closed, the focus lock will resume on the calling 
modal window. This will repeat until there are no more modals open.
</p>

<p>
Use the "z-index" to control overlay and window overlap. See the <a href="README">documentation</a>.
</p>
</div>

</div></div></div>
<input type="image" src="img/dialog/close.gif" class="jqmdX jqmClose" />
</div>
5. Multi-Show/Hide -- a. view (show all), b. view (hide all), c. view (show+hide some)
Triggers can cotrol more than 1 jqModal. You can assign new show or hide triggers to any jqModal element with $.jqmAddTrigger and $.jqmAddClose.
Square A
Square B
Square D
Square C
Javascript 
$().ready(function() {
  var show = $('#ex5show');
  var hide = $('#ex5hide');
  
  $('div.square')
    .jqm({overlay: 0, trigger: false})
    //.jqDrag()
    .jqmAddTrigger(show)
    .jqmAddClose(hide)
    
  $('#ex5multi').click(function() {
    $('div.square:even').jqmShow();
    $('div.square:odd').jqmHide();
    return false;
  });
});
CSS 
div.square {
  display: none;
  height: 88px;
  width: 88px;
  font-size: 10px;
  padding: 5px;
  border: 1px solid;
  position: absolute;
}

div.square.a{
  background: #EEE;
  color: #777;
  border-color: #777;
  margin: 0 0 0 300px;
}

div.square.b{
  background: #FFF6E5;
  color: #FF8000;
  border-color: #FF8000;
  margin: -300px 0 0 300px;
}

div.square.c{
  background: #DDF0BD;
  color: green;
  border-color: green;
  margin: 0 0 0 600px;
}

div.square.d{
  background: #FFF1F1;
  color: red;
  border-color: red;
  margin: -300px 0 0 600px;
}
HTML 
<a href="#" id="ex5show">view</a> (show all)
<a href="#" id="ex5hide">view</a> (hide all)
<a href="#" id="ex5multi">view</a> (show+hide some)
...

<div class="squarePlacer">

<div class="square a">
Square A
</div>

<div class="square b">
Square B
</div>

<div class="square d">
Square D
</div>

<div class="square c">
Square C
</div>

</div>
6. FUN! Overrides -- a. view (alert), b. view (confirm)
It is now time to show a real-world use for jqModal -- overriding the standard alert() and confirm dialogs! Note; due to the single threaded nature of javascript, the confirm() function must be passed a callback -- it does NOT return true/false.

Warning!

Close

Confirmation por favor...

Close

Continue?

Javascript 

/* Overriding Javascript's Alert Dialog */

function alert(msg) {
  $('#alert')
    .jqmShow()
    .find('div.jqmAlertContent')
      .html(msg);
}

$().ready(function() {
  $('#alert').jqm({overlay: 0, modal: true, trigger: false});
  
  // trigger an alert whenever links of class alert are pressed.
  $('a.alert').click(function() { 
    alert('You Have triggered an alert!'); 
    return false;
  });
});


/* Overriding Javascript's Confirm Dialog */

// NOTE; A callback must be passed. It is executed on "cotinue". 
//  This differs from the standard confirm() function, which returns
//   only true or false!

// If the callback is a string, it will be considered a "URL", and
//  followed.

// If the callback is a function, it will be executed.


function confirm(msg,callback) {
  $('#confirm')
    .jqmShow()
    .find('p.jqmConfirmMsg')
      .html(msg)
    .end()
    .find(':submit:visible')
      .click(function(){
        if(this.value == 'yes')
          (typeof callback == 'string') ?
            window.location.href = callback :
            callback();
        $('#confirm').jqmHide();
      });
}


$().ready(function() {
  $('#confirm').jqm({overlay: 88, modal: true, trigger: false});
  
  // trigger a confirm whenever links of class alert are pressed.
  $('a.confirm').click(function() { 
    confirm('About to visit: '+this.href+' !',this.href); 
    return false;
  });
});
CSS 
div.jqmConfirm input[type="submit"] { padding: 4px; margin: 10px 30px; background: #000; color: #FFF; border: 1px solid #AAA; }

/* jqModal confirm CSS courtesy of;
   Alexandre Plennevaux <alexandre@pixeline.be>,
   Brice Burgess <bhb@iceburg.net> */

div.jqmConfirm { /* contains + positions the alert window */
  display: none;
  
  position: fixed;
  top: 17%;
  width: 100%;
}
    
/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html div.jqmConfirm {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}

div.jqmConfirmWindow {
  height:auto;
  width: auto;
  margin: auto;
  
  max-width:400px;
  padding: 0 10px 10px;
  
  background:#FFF;
  border:1px dotted #FFF;
}

.jqmConfirmTitle{
  margin:5px 2px;
  height:20px;
  color:#000;
  background:#FFF;
}
.jqmConfirmTitle h1{
  margin:5px 2px;
  padding-left:5px;
  padding:0;
  font-size:14px;
  text-transform:capitalize;
  letter-spacing:-1px;
  font-weight:bold;
  color:#000;

  float:left;
  height:20px;
}

div.jqmConfirm .jqmClose em{display:none;}
div.jqmConfirm .jqmClose {
  width:20px;
  height:20px;
  display:block;
  float:right;
  clear:right;
  background:transparent url(img/confirm/close_icon_double.png) 0 0 no-repeat;
}

div.jqmConfirm a.jqmClose:hover{ background-position: 0 -20px; }

div.jqmConfirmContent{
  border-top:px;
  color:#000;
  font:11px/14pt arial;
  padding:5px 20px 5px;
  margin:5px;
  border:1px dotted #111;
  letter-spacing:0px;
  background:#FFF url(img/confirm/darkgrid.png);
}

/*°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°
  clearing a float without additional markup
   http://www.positioniseverything.net/easyclearing.html */

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
HTML 
<a href="#" class="alert">view</a> (alert)
<a href="#" class="confirm">view</a> (confirm)
...
<!-- Alert Dialog -->
<div class="jqmAlert" id="alert">

<div id="ex3b" class="jqmAlertWindow">
    <div class="jqmAlertTitle clearfix">
    <h1>Warning!</h1><a href="#" class="jqmClose"><em>Close</em></a>
  </div>
  
  <div class="jqmAlertContent"></div>
</div>

</div>



<!-- Confirm Dialog -->
<div class="jqmConfirm" id="confirm">

<div id="ex3b" class="jqmConfirmWindow">
    <div class="jqmConfirmTitle clearfix">
    <h1>Confirmation por favor...</h1><a href="#" class="jqmClose"><em>Close</em></a>
  </div>
  
  <div class="jqmConfirmContent">
  <p class="jqmConfirmMsg"></p>
  <p>Continue?</p>
  </div>
  
  <input type="submit" value="no" />
  <input type="submit" value="yes" />
  </p>
  
</div>

</div>
7. External Site (iframe) usage (with added bling-in-the-box)
Alexandre Plennevaux has posted a tutorial on effectively using jqModal to load external sites into a popup dialog. His method updates an iframe inside a dialog with the HREF attribute of the triggering element. It is an excellent example of real-world jqModal usage. As an added bonus; the bling-factor is furthered by showing off some fancy animated transistions! Be sure to check out his demonstration.
Etc.


Support, Bugs, Contributing, Community

Support
Issues
Contributing
Community
  • jqModal is an open project. Community embrace is its lifeblood. Please feel free to help answer questions on stackoverflow or submit your ideas to our issue tracker.

    Your involvement is appreciated!