* About <#who> * Download <#where> * Usage <#how> * Examples <#examples> * Changes and Issues <#etc> Who? jqModal Minimalist Modaling with jQuery What? jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a "Swiss Army Knife", and makes a great base as a general purpose windowing framework. /Features/; * Designer Frieldly - Use *your* HTML+CSS for Layout and Styling * Translator/i18n friendly - No hardcoded English strings * Developer friendly - Extensible through callbacks to make anything (gallery slideshows, video-conferencing, etc.) possible * Multiple Modal Support (including Modal-in-Modal) * Support for Drag'n'Drop + Resizing * Support for remotely loaded Window content (ajax and iframes) Why? There is no shortage of dialog scripts that "dazzle" their audience. Some will try to walk your dog. These scripts are often rooted in unnecessary effects, are rigid, and extremely cumbersome. This is not where jqModal is headed! I wanted to write a simple modal framework. Something /lightweight/ yet /powerful/ and /flexible/. We'll demonstrate the dazzling dogwalks later... for now, you are encouraged to pioneer your own effects by harnessing the power of jQuery and jqModal! If you like jqModal, please consider a dontation to support its development: When? Current Version: /2008.07.06 +r13/ © 2007,2008 Brice Burgess - released under both the MIT and GPL licenses. Where? Download the /Plugin / (jqModal.js - 2.97k) [jQuery >= *1.1.3.1*+] Download the /Styling / (jqModal.css - 496 bytes) *[OPTIONAL]* /Commented Version / (jqModal.dev.js) - An older version with comments to help you *tinker*. *[OPTIONAL]* /Drag'n'Resize Plugin <../jqDnR/>/ (jqDnR.js - 874 bytes) - It is recommended to combine DnR and jqModal javascript files into one to reduce server overhead. ** file sizes reflect *un*compressed source with header removed If you need /support/ or have /comments/, please post to the jQuery mailing list . *Image Caching*; Some browsers do not preload background images and image elements if they are hidden (have a parent whose display is set to none or hidden). This could 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 <#>
Test for Internet Explorer 6: How? /Usage/ Typically, to add popup dialogs, frames, windows, or what-have-yous to your website you must; 1. Add dialog placeholder(s) to your page Dialog placeholders are usually hidden
containers placed as children of the element. CSS is used for styling and position. Dialogs are displayed("shown") when a trigger event occurs. Their contents(message/image/etc.) can be inline (hardcoded in the HTML) or added via ajax when the dialog is shown. 2. Initialize your dialog(s) jqModal must be called on each dialog element before it can be shown using the /$.jqm()/ function. You can customize your dialogs by passing parameters as an argument (e.g. /$('#dialog').jqm({modal: true, trigger: 'a.showDialog'});/). NOTE: $.jqm() should only be called ONCE per dialog element! In special cases you may want to change a dialog's parameters. Subsequent calls to $.jqm() will update the dialog(s) parameters. 3. Trigger your dialog Dialogs are automatically shown when a "trigger" element is clicked. You can also manually trigger a dialog by executing the /$.jqmShow()/ function on it. /Functions/ jqm Initialize element(s) to be used as a jqModal. Accepts a parameters object. If element(s) are already initialized, the call will update their parameters. $('#dialog').jqm(); $('.dialogs').jqm({ajax:'@href',modal:true}); jqmShow Show jqModal element(s). $('#dialog').jqmShow(); $('.dialogs').jqmShow(); jqmHide Hide jqModal element(s). $('#dialog').jqmHide(); $('.dialogs').jqmHide(); jqmAddTrigger Adds the passed element(s) as a "show" trigger. Clicking them will show the jqModal. Accepts; * (string) A jQuery Selector * (object) A jQuery Collection * (object) A DOM element $('#dialog').jqmAddTrigger('.openDialog'); $('.dialogs').jqmAddTrigger($('#openDialogs a')); jqmAddClose Adds the passed element(s) as a "close" trigger. Clicking them will hide the jqModal. Accepts; * (string) A jQuery Selector * (object) A jQuery Collection * (object) A DOM element $('#dialog').jqmAddClose('.hideDialog'); $('.dialogs').jqmAddClose($('#hideDialogs a')); /Parameters/ Parameters allow tailoring the behavior of any jqModal to your needs. They are passed on-the-fly as an object to the $.jqm function. NOTE; you can overide the default setting of a parameter by modifying the /$.jqm.params/ global. For instance, to have ALL dialogs appear as modal dialogs (without passing modal as "true"), execute /$.jqm.params.modal = true/ before any calls to the $.jqm() function. overlay The overlay transparency as a percentage. If 0 the overlay is disabled, and the page 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 When a dialog is shown, elements that have a CSS class of closeClass will close the dialog when clicked. For instance; If your dialog contains an , the dialog will close when this image is clicked. You can use $.jqmHide() to close a dialog manually. (string|false) - default: 'jqmClose' trigger Elements matching trigger will show the dialog when clicked. They are assigned when $.jqm() is called. 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 look for trigger elements. (string|object|false) - default: '.jqModal' ajax If passed, dialog contents will be loaded remotely via ajax. 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 bar.html if the triggering element was Open Dialog. If a more complicated loading routine is desired, the onShow() callback should be leveraged. (string|false) - default: false ajaxText NOTE: ajaxText is applicable only if the ajax parameter is passed. Text to display while waiting for ajax returned content. May include HTML (such as an loading image). E.g. $.jqm({ajaxText: '.. ... .'}); (string) - default: '' target NOTE: target is applicable only if the ajax parameter is passed. If passed, the ajax return will be loaded into the target element. The target element MUST EXIST as a child of the dialog. 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 modal Restricts input (mouse clicks, keypresses) to the dialog. NOTE: If false, and if overlay is enabled, CLICKING THE OVERLAY WILL CLOSE THE DIALOG. (boolean) - default: false toTop When true; places the dialog element as a direct child of 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 dialog element * c: (object) The config object (dialog's parameters) * o: (jQuery object) The overlay * t: (DOM object) The triggering element onShow (callback) Called when a dialog is to be shown. Be sure to show (set visible) the dialog. // onShow : show+make the window translucent var myOpen=function(hash){ hash.w.css('opacity',0.88).show(); }; $('#dialog').jqm({onShow:myOpen}); (function|false) - default: false onHide (callback) Called when a dialog is to be hidden. Be sure to remove the overlay (if enabled). // onHide : fade the window out, remove overlay after fade. var myClose=function(hash) { hash.w.fadeOut('2000',function(){ hash.o.remove(); }); }; $('#dialog').jqm({onHide:myClose}); (function|false) - default: false 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 See the README for further information. /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 */ /* 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 <#> view ...
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.
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 */ /* 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 <#> ...
Please wait... loading
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 */ 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(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(dialog/sprite.gif) no-repeat 0px -41px; padding-left: 3px;} div.jqmdTR { background: url(dialog/sprite.gif) no-repeat right 0px; padding-right: 3px; * zoom: 1;} /* [[[ Body / Message Classes ]]] */ div.jqmdBC { background: url(dialog/bc.gif) repeat-x center bottom; padding: 7px 7px 7px; height: 180px; overflow: auto; } div.jqmdBL { background: url(dialog/bl.gif) no-repeat left bottom; padding-left: 7px; } div.jqmdBR { background: url(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(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 <#>
view (dialog) ...
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.
*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 }); // Close Button Highlighting. IE doesn't support :hover. Surprise? if($.browser.msie) { $('div.jqmAlert .jqmClose') .hover( function(){ $(this).addClass('jqmCloseHover'); }, function(){ $(this).removeClass('jqmCloseHover'); }); } }); CSS <#> /* jqModal alert CSS courtesy of; Alexandre Plennevaux , Brice Burgess */ 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(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(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 <#> view (alert) ...

Did you know?

Close

Please wait... loading

*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(); }, 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 , Brice Burgess */ div.jqmNotice { display: none; position: relative; width: 320px; background:#FFFFCC url(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 <#> view (notice) ...

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
*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. Also exemplified is 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. // Work around for IE's lack of :focus CSS selector if($.browser.msie) $('input') .focus(function(){$(this).addClass('iefocus');}) .blur(function(){$(this).removeClass('iefocus');}); }); 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 <#> view (4a.html) view (4b.html) ...
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.

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 <#> view (show all) view (hide all) view (show+hide some) ...
Square A
Square B
Square D
Square C
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 , Brice Burgess */ 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(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(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 <#> view (alert) view (confirm) ...

Warning!

Close

Confirmation por favor...

Close

Continue?

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. /Previous Releases/ All revisions of jqModal are available are available here . Known Issues, Pending Fixes * Update jqDnR, make squares draggable * Demonstrate an enhanced slideshow * Incorporate "smart" modal focus routine * Abstract IE6 workarounds from base CSS, use conditional includes R13 Changes * Minor code optimizations * Fixed potential exception in modal focus routine * Overlays of modal dialogs are no longer automatically styled with a "wait" cursor. Use CSS to control * Exposed overiding of default parameter values via the $.jqm.params global R12 Changes * Now dual licensed under the MIT and GPL licenses * Compatibility with jQuery 1.2.6 * Removed zIndex parameter * Subsequent $.jqm calls now update configuration * AJAX target is now cleared before load * Added ajaxText parameter R11 Changes * added toTop argument to break z-Index container restraints (demo ) * improved focus method tolerance * overlay now takes z-Index stacking order precedence Earlier Release Changes <#> /R10 Changes/; * focus element re-calculated every modal click to prevent IE error * ie6 sets body width to 100% * Require fixed pushStack,$.browser.version -- jQuery 1.1.3.1 MINIMUM! * compressible with a javascript packer * HTTPS/SSL served iFrame content will not throw warnings in IE /R8,R9 Changes/ * /Updated CSS/, Sync up. * Fixed IE crash when ajax loaded elements used as trigger(s) * IE6 - overlay now covers dialog only, allowing page interaction when overlay: 0 /R7 Changes/ * Added $.jqmShow, $.jqmHide to manually hide/show dialogs * Added $.jqmAddTrigger and $.jqmAddClose to bind show/hide to elements * Added onLoad callback (called after ajax return) * Added support for handling multiple dialogs @ once across ALL functions * Removed auto-fire parameter, replaced via $(e).jqm().jqmShow() * Removed $.jqmClose() * Removed "wrapClass" parameter, updated base CSS * CSS z-index value takes priority over "zIndex" parameter * Triggers can hide, show, or hide AND show jqModals * Overlays+IE6 iframe are now fixed positioned - support for ie6 quirks + standards mode * Internal Improvements, no event data /Contributing/; ------------------------------------------------------------------------ I would like to eventaully host a HTML+CSS repository of dialog, window, and notice themes to be used in conjunction with jqModal. If you would like to contribute themes or ideas please do! I am a very slow designer and could use your help ;) Feel free to email me @ .