jqModal jquery 插件潇湘博客

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.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

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

<!-- 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:

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 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: '<marquee style=" 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

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.

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;
     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.

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;
     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.

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;
   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;
   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.

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%;
   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;
   auto;
  margin: auto;
  
  max-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 {
  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.

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;
    
     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;
   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).

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 {  560px; margin-left: -280px; }
div.jqmdTall { height: 330px; }


div.centered {  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.

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;
   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.

Confirmation por favor...

Close

Continue?

Javascript

/* Overriding Javascript's Alert Dialog */

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

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


/* Overriding Javascript's Confirm Dialog */

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

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

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


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


$().ready(function() {
  $('#confirm').jqm({overlay: 88, modal: true, trigger: false});
  
  // trigger a confirm whenever links of class alert are pressed.
  $('a.confirm').click(function() { 
    confirm('About to visit: '+this.href+' !',this.href); 
    return false;
  });
});

CSS

div.jqmConfirm input[type="submit"] { padding: 4px; margin: 10px 30px; background: #000; color: #FFF; border: 1px solid #AAA; }

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

div.jqmConfirm { /* contains + positions the alert window */
  display: none;
  
  position: fixed;
  top: 17%;
   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;
   auto;
  margin: auto;
  
  max-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 {
  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.

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;

此插件功能类似于 hickbox-compressed.js

转自:http://dev.iceburg.net/jquery/jqModal/

相关阅读:
HDU 4861 Couple doubi(数论)
POJ 3233 Matrix Power Series 二分+矩阵乘法
 js原生offsetParent解析
 ADS-B显示终端6.8
模板
 习题四——数字智力题
 Android ORMLite ForeignCollection关联外部集合
 Android应用程序无法读写USB设备的解决方法
 [学习笔记]批次需求计划-十一大量
 jqury+css实现可弹出伸缩层
原文地址：https://www.cnblogs.com/fengju/p/6174008.html

jqModal jquery 插件 潇湘博客

Did you know?

Did you know?

Warning!

Confirmation por favor...

jqModal jquery 插件潇湘博客