jquery插件jqModal 模态窗口
http://dev.iceburg.net/jquery/jqModal/#examples
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
- Simple support for remotely loaded content (aka "AJAX")
- Multiple Modal Support (including Modal-in-Modal)
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: 2009.03.01 +r14
Copyright © 2007-2009 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)
[PREVIOUS RELEASES] available here.
[OPTIONAL] Drag'n'Resize Plugin (jqDnR.js - 874 bytes) - It is recommended to combine DnR and jqModal javascript files into one to reduce server overhead.
** file sizes reflect uncompressed source with header removed
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
<!-- 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 <[email protected]> */ @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:
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 <div> containers placed as children of the <body> 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 <img class="closeClass" src="close.gif">, 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 <a href="foo/bar.html">Open Dialog</a>. If a more complicated loading routine is desired, the onShow() callback should be leveraged.
(string|false) - default: false
- ajaxText
-
Text to display while waiting for ajax returned content. May include HTML (such as an loading image). E.g. $.jqm({ajaxText: '<marquee style="width: 1.5em;">.. ... .</marquee>'});
(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 <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 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
NOTE: ajaxText is applicable only if the ajax parameter is passed.
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.
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 <[email protected]> */ /* 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 <[email protected]> */ /* 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 <[email protected]> */
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>
3a (dialog) - custom overlay, draggable window.
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 <[email protected]>, Brice Burgess <[email protected]> */ 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>
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.
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 <[email protected]>,
Brice Burgess <[email protected]> */
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>
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).
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!
Close
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 <[email protected]>,
Brice Burgess <[email protected]> */
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.
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.
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
- R14 Changes
-
Changes include smart detection of the triggering element. This allows you to call $.jqmShow() and $.jqmHide() within the event context of a non-initialized triggering element, and that element will mask a proper initialized trigger.
This (very minor) change is intended to improve the plugin's natural behavior -- that is; to behave as expected. It will make "live querying" modal triggers easier for some.
A simple example of the new behavior is shown below. It will show and load the remote content of all anchor links into the modal window whenever they are clicked.
<a href="http://my.ajax/content">open modal with my.ajax/content</a> <div id="jqModal" class="jqmWindow" style="display: none;"></div> <script type="text/javascript"> jQuery().ready(function($){ // initialize modal, // load the container with a remote return based on the 'href' // attribute of triggering element(s) $('#jqModal').jqm({ajax:'@href'}); // open the modal whenever anchor links on the page are clicked $('a').live('click',function(){ $('#jqModal').jqmShow(); }); }); </script> - 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