Who?
jqModal
Minimalist Modaling with jQuery
What?
jqModal is a tool to help you display notices, dialogs, and modal windows in a web browser. Looks are controlled by standard and designer friendly HTML and CSS, independent of the javascript. jqModal is flexible and tiny -- it is the Swiss Army Knife of a great "general purpose" window plugin for jQuery.
Features;
- Inline or remote (ajax/iframe) Window Content.
- Modal-in-modal and Multiple Independent Modal support
- Tailor behavior "on-the-fly" with easy to understand parameters and callbacks
- DOM element events are preserved, remote (ajax) javascript is evaluated
- Translator/i18n friendly; no hardcoded English strings
- Designer Friendly; abstracted HTML, CSS, and Javascript
- Support for Drag'n'Drop + Resizing
- Extendable through callbacks to make anything (gallery slideshows, video-conferencing, etc.) possible
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: 2007.08.17 +r11
(c) 2007 Brice Burgess under The MIT License
Where?
Download the Plugin (jqModal.js - 3.01k) [jQuery >= 1.1.3.1+]
Download the Styling (jqModal.css - 496 bytes)
Download the Documentation
Download the old Plugin (jqModal-r9.js - 2.85k) [jQuery <= 1.1.2] for compatibility with earlier versions of jQuery.
Download the Develompment Version (jqModal.dev.js) with commenting for tinkering.
Download the Drag'n'Resize Plugin (jqDnR.js - 874 bytes) [OPTIONAL] - It is recommended to combine DnR and jqModal javascript files into one to reduce server overhead.
[file sizes reflect uncompressed source with header removed]
How?
If you need support or have comments, please post to the jQuery mailing list.
Image Caching; Some browsers will not load/prefetch hidden <IMG> elements (images contained by a parent element whose display is set to "none"/"hidden"). This is especially true if the desired image is defined as the background url of an element. An OPTIONAL fix is used on this page. 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="dialog/close.gif" />
<img src="dialog/sprite.gif" />
<img src="dialog/close_sprite.gif" />
<img src="dialog/bl.gif" />
<img src="dialog/br.gif" />
<img src="dialog/bc.gif" />
<img src="notice/note_icon.png" />
<img src="notice/close_icon.png" />
</div>
Test for Internet Explorer 6:
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.
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.
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.
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...
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.
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.
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(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
<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="dialog/close.gif" class="jqmdX jqmClose" /> </div>
Did you know?
ClosePlease wait...
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 <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(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
<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>
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.
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 <alexandre@pixeline.be>,
Brice Burgess <bhb@iceburg.net> */
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
<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="notice/close_icon.png" alt="close" class="jqmClose" />
<img src="dialog/resize.gif" alt="resize" class="jqResize" />
</div>
</div>
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).
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...
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
<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="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="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.
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.
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!
CloseConfirmation por favor...
CloseContinue?
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(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
<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. toTop method, addressing z-Index and containers -- a. demo
jqModal provides a means to overcome z-Index stacking order issues. See the demo to learn what to do if the overlay covers the entire page *including* the modal dialog!
jqModal provides a means to overcome z-Index stacking order issues. See the demo to learn what to do if the overlay covers the entire page *including* the modal dialog!
Etc.
Known Issues, Pending Fixes;
- Please report inconsistencies and odd behavior
- Update jqDnR, make squares draggable
- Rewrite Documentation, include toTop method.
R11 Changes; - revisions are available here.
- added toTop argument to break z-Index container restraints (demo)
- improved focus method tolerance
- overlay now takes z-Index stacking order precedence
R10 Changes; - revisions are available here.
- 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
Earlier Release Changes
R8,R9 Changes; - revisions are available here.
- 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; - revisions are available here.
- 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 @ <bhb@iceburg.net>.