Jqmodal is a plug-in for jquery that displays custom advertisements in a Web browser, and it lays the groundwork for a common window framework.
1. Multi-model support 2. Supports drag and resize 3, supports remote loading of window contents (Ajax and IFRAMEs) Download: http://dev.iceburg.net/jquery/jqModal/#examples method used: Step1: Add js and CSS
<link href= "Css/jqmodal.css" rel= "stylesheet" type= "Text/css"/>
<script src= "Scripts/jquery-1.3.2.min.js" type= "Text/javascript" ></script>
<script src= "Scripts/jqmodal.js" type= "Text/javascript" ></script>
<script src= "Scripts/jqdnr.js" type= "Text/javascript" ></script>
STEP2: Foreground HTML
<a href= "#" class= "Jqmodal" >view</a>
...
<div class= "Jqmwindow" id= "dialog" >
<a href= "#" class= "Jqmclose" >Close</a>
<em>read me</em>--
This is a "vanilla plain" jqmodal window. Behavior and Appeareance extend far beyond this.
The demonstrations on this page would show off a few possibilites. I recommend walking
Through each one to get a understanding of Jqmodal <em>before</em> using it.
</div>
Front desk JS
<script type= "Text/javascript" >
$ (). Ready (function () {
$ (' #dialog '). JQM ();
});
</script>
Effect: Foreground HTML:
<a href= "#" class= "Ex3btrigger" >view</a> (Alert)
...
<div class= "Jqmalert" id= "ex3b" >
<div id= "ex3b" class= "Jqmalertwindow" >
<div class= "Jqmalerttitle clearfix" >
</div>
<div class= "Jqmalertcontent" >
<p>please wait ... </p>
</div>
</div>
</div>
Front desk JS
$ (). Ready (function () {
var triggers = $ (' a.ex3btrigger ') [0];
$ (' #ex3b '). JQM ({
Trigger:triggers,
Ajax: ' Html/2.htm ',
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 ');});
}
});
Effect: Foreground HTML
<body>
<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 is easy!
<br/><br/>
This particular theme is done for <a href= "http://www.pommo.org" >poMMo</a>--
</div>
</div></div></div>
<input type= "image" Src= "Dialog/close.gif" class= "jqmdx jqmclose"/>
</div>
</body> Front desk JS
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (' #ex3a '). JQM ({
Trigger: ' #ex3aTrigger ',
OVERLAY:30,/* 0-100 (int): 0 is off/transparent, and is opaque */
Overlayclass: ' Whiteoverlay '
})
. Jqdrag ('. Jqdrag '); /* Make dialog draggable, assign handle to Title */
$ (' input.jqmdx ')
. Hover (
Function () {$ (this). addclass (' Jqmdxfocus ');},
Function () {$ (this). Removeclass (' Jqmdxfocus ');})
. Focus (
function () {This.hidefocus = true; $ (this). addclass (' Jqmdxfocus ');})
. Blur (
Function () {$ (this). Removeclass (' Jqmdxfocus ');});
});
</script> effect: Foreground html
<body>
<a href= "#" id= "Ex3ctrigger" >view</a> (notice)
...
<div style= "Position:absolute; margin:10px 0 0 100px; " >
<div id= "ex3c" class= "Jqmnotice" >
<div class= "Jqmntitle Jqdrag" >
</div>
<div class= "Jqmncontent" >
<p>pine, spruce, or other evergreen wood should never is used in barbecues. These woods, </p>
</div>
</div>
</div>
</body>
Front desk JS
$ (). 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 ();});
}
});
}); Effect: Foreground HTML
<body>
<a href= "#" class= "Ex2trigger" >View</a>
...
<div class= "Jqmwindow" id= "EX2" >
Please wait ...
</div>
</body>
Front desk JS
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (' #ex2 '). JQM ({ajax: ' html/1.htm ', Trigger: ' A.ex2trigger '});
});
</script>
Effect: Foreground HTML
<body>
<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" >
</div>
<div class= "Jqmalertcontent" ></div>
</div>
</div> <!--Confirm Dialog--
<div class= "jqmconfirm" id= "Confirm" >
<div id= "ex3b" class= "Jqmconfirmwindow" >
<div class= "Jqmconfirmtitle clearfix" >
</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>
</body>
<script type= "Text/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 is pressed.
$ (' A.alert '). Click (function () {
Alert (' You had triggered an alert! ');
return false;
});
});
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 is pressed.
$ (' a.confirm '). Click (function () {
Confirm (' About to visit: ' + this.href + '! ', this.href);
return false;
});
});
</script>
Effect:
jquery Plugin jqmodal Application details (12)
