<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<head>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>jquery Plug-in dialog and tips pop tip effect </title>
<script type= "text/web Effects" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" ></script >
<style type= "Text/css Tutorial" >
*
{
padding:0;
margin:0;
font-size:13px;
}
a{
Color: #333;
}
UL li{
height:25px;
}
/*-------Prompt style-------* *
. popup_prompt{
border:1px solid #909090;
Background: #fff;
}
. popup_prompt. popup_header{}
. popup_prompt H1
{
height:25px;
margin:1px;
font-size:13px;
Color: #f4793a;
Font-weight:bold;
text-indent:10px;
padding-top:7px;
}
. popup_prompt. popup_content
{
margin:1px;
padding:10px;
font-size:13px;
}
. popup_prompt. Buttonrow
{
height:30px;
line-height:30px;
Text-align:right;
margin:1px;
}
. popup_prompt Input
{
Color: #555;
border:1px solid #808080;
margin-right:5px;
height:20px;
line-height:18px;
padding:0px 3px;
}
/*-------Tip style-------* *
. popup_tip
{
border:1px #684e02 Solid;
Vertical-align:middle;
Filter:alpha (opacity=80);
-moz-opacity:0.8;
}
. Popup_tip. popup_content
{
Color: #000;
Background: #fcfbe0;
Text-align:center;
}
. Popup_tip img
{
Vertical-align:middle;
}
/*-------Help style-------* *
. Popup_help_up,.popup_help_down
{
width:271px;
Filter:alpha (opacity=85);
}
. popup_help_up
{
Background:url (images/help_t1.gif) left top no-repeat;
}
. Popup_help_down
{
Background:url (images/help_t2.gif) left top no-repeat;
}
. popup_help_up A:link,.popup_help_down A:link
{
Text-decoration:underline;
}
. popup_help_up. Popup_header
{
margin-top:9px;
}
. Popup_help_down. Popup_header
{
margin-top:22px;
}
. popup_help_up. Popup_header,.popup_help_down. Popup_header
{
height:18px;
border-left:1px #000 Solid;
border-right:1px #000 Solid;
Background: #ffffe1;
}
. popup_help_up. Popup_header h1,.popup_help_down. Popup_header H1
{
font-size:13px;
text-indent:28px;
Background:url (images/action.gif) 10px 0px no-repeat;
}
. popup_help_up. Popup_content,.popup_help_down. popup_content
{
line-height:16px;
padding:5px 10px;
border-left:1px #000 Solid;
border-right:1px #000 Solid;
Background: #ffffe1;
}
. popup_help_up. Popup_bottom
{
height:22px;
Background:url (images/help_b1.gif) left top no-repeat;
}
. Popup_help_down. Popup_bottom
{
height:9px;
Background:url (images/help_b2.gif) left top no-repeat;
}
</style>
<script type= "Text/javascript" >
jquery Dialogs Plugin
Version 1.1
Cory S.N. Laviska (http://abeautifulsite.net/)
Edit by Linpanxing (http://www.91asp tutorial x.com/)
//
(function ($) {
$.popup = {
Id:null,
Title: "",
top:0,
left:0,
width:0,
height:0,
Poptype: "",
Repositiononresize:false,//window resize or reposition
OKButton: ' OK ',//OK button
CancelButton: ' Cancel ',//Cancel button
Isbuttonrow:false,//whether to show buttons
Ispopup:false,//Is popup window
autoclose:0,//Window auto Close (greater than 0 O'Clock window auto close)Public methods
Tip:function (msg, top, left, AutoClose) {
this.id = ' Tip ';
This.poptype = ' Tip ';
This.title = ';
This.ispopup = false;
This.autoclose = AutoClose | | 0;
This.width = 240;
This.height = 30;
This.top = Top | | ($ (document). Height ()-this.height)/2;
This.left = left | | ($ (document). Width ()-this.width)/2;
$.popup._show (NULL, MSG, NULL);
},Help:function (Elem, title, MSG, height) {
this.id = ' help ';
this.title = Title | | This.title;
This.width = 271;
This.height = Height | | 40;
var top = $ (elem). Offset (). Top;
if (Top-60-this.height > 0) {
This.top = $ (elem). Offset (). Top-60-this.height;
This.poptype = ' help_up ';
}
else {
This.top = top + 16;
This.poptype = ' Help_down ';
}
This.left = $ (elem). Offset (). left-30;
$.popup._show (Elem, msg);
},Prompt:function (Elem, title, MSG, Isbuttonrow, Ispopup, callback, Top, left, width, height) {
This.id = ' Prompt ';
this.title = Title | | This.title;
This.poptype = ' Prompt ';
This.isbuttonrow = Isbuttonrow | | This.isbuttonrow;
This.ispopup = Ispopup | | This.ispopup;
This.top = Top | | $ (elem). Offset (). Top + 16;
This.left = left | | $ (elem). Offset (). Left;
This.width = Width | | 300;
This.height = Height | | 120;
$.popup._show (Elem, MSG, function (result) {
if (callback) callback (result);
});
},Private method
_show:function (Elem, MSG, callback) {
if ($ ("#_popup_" + this.id). Length < 1) {
$.popup._hide ();
var html =
' <div class= ' popup_ ' + this.poptype + ' "id=" _popup_ ' + this.id + ' "style=" width: ' + this.width + ' px ' >
<div class= "Popup_header" id= "_title_" ><h1> ' + this.title + ' </h1><div class= ' H_r ' ></div ></div>
<div class= "Popup_content" >
<div id= "_container_" + this.id + (this.height = 0?) ' > ': ' style= ' height: ' + this.height + ' px ' > ' + msg + ' </div></div> ' +
(This.isbuttonrow?) ' <div class= ' buttonrow ' id= ' _buttonrow_ ' + this.id + ' ></div> ': '
' <div class= ' popup_bottom ' ><div class= ' B_r ' ></div>
</div> ';$ ("Body"). Append (HTML);
IE6 fix
var pos = ($.browser.msie && parseint ($.browser.version) <= 6)? ' Absolute ': ' fixed ';$ ("#_popup_" + this.id). css ({
position: ' absolute ',
zindex:100,
padding:0,
margin:0
});$ ("#_popup_" + this.id). css ({
MinWidth: $ ("#_popup_" + this.id). Outerwidth (),
MaxWidth: $ ("#_popup_" + this.id). Outerwidth ()
});$.popup._reposition ();
$.popup._maintainposition (TRUE);$.popup._bindtype ();
Popup Window method to test
if (this.ispopup) {
$ (elem). Click (function (e) {
E? E.stoppropagation (): Event.cancelbubble = true;
});
$ ("#_popup_" + this.id). Click (function (e) {
E? E.stoppropagation (): Event.cancelbubble = true;
});
$ (document). Click (function () {
$.popup._hide ();
});
}if (This.autoclose > 0) {
$.popup._autoclose ();
}
}
else {
$ ("#_container_" + this.id). HTML (msg);
$.popup._bindtype (callback);
$.popup._reposition ();
$.popup._maintainposition (TRUE);
$ ("#_popup_" + this.id). Show ();
if (This.autoclose > 0) {
$.popup._autoclose ();
}
}
},_bindtype:function (callback) {
Switch (this.poptype) {
Case ' help ':
if (This.isbuttonrow) {
$ ("#_buttonrow_" + this.id). After (' <input type= "button" value= "' + $.popup.okbutton + '" id= "_buttonok_ ' + this.id + '" /> ');
$ ("#_buttonok_" + this.id). Click (function () {
$.popup._hide ();
Callback (TRUE);
});
$ ("#_buttonok_" + this.id). KeyPress (function (e) {
if (E.keycode = | | e.keycode = $) $ ("#_buttonok_" + this.id). Trigger (' click ');
});
}
Break
Case ' Prompt ':
if (This.isbuttonrow) {
$ ("#_buttonrow_" + this.id). html (' <input type= ' hidden ' id= ' hid_ ' + this.id + ' "/>
<input type= "button" value= "' + $.popup.okbutton + '" id= "_buttonok_ ' + this.id + '"/>
<input type= "button" value= "' + $.popup.cancelbutton + '" "id=" _buttoncancel_ ' + this.id + ' "/>");
$ ("#_buttonok_" + this.id). Click (function () {
var val = $ ("#hid_" + this.id). Val ();
$.popup._hide ();
if (callback) callback (Val);
});
$ ("#_buttoncancel_" + this.id). Click (function () {
$.popup._hide ();
if (callback) callback (NULL);
});
$ ("#_buttonok_" + this.id + ", #_buttoncancel_" + this.id). KeyPress (function (e) {
if (E.keycode =) $ ("#_buttonok_" + this.id). Trigger (' click ');
if (E.keycode = =) $ ("#_buttoncancel_" + this.id). Trigger (' click ');
});
}
Break
Case ' tip ':
Break
Default
Break
}},
_hide:function () {
if ($ ("#_popup_" + this.id). Length > 0) {
if (This.poptype = = "Tip") {
$ ("#_popup_" + this.id). fadeout (500);
}
else {
$ ("#_popup_" + this.id). Remove ();
}
$.popup._maintainposition (FALSE);
}
},_autoclose:function () {
SetTimeout ("$.popup._hide ()", this.autoclose * 1000);
},_reposition:function () {
var top = This.top | | ((document). Height ()/2)-($ ("#popup_container"). Outerheight ()/2));
var left = This.left | | ((document). Width ()/2)-($ ("#popup_container"). Outerwidth ()/2));
if (Top < 0) top = 0;
if (left < 0) left = 0;
IE6 fix
if ($.browser.msie && parseint ($.browser.version) <= 6) top = top + $ (window). scrolltop ();
$ ("#_popup_" + this.id). css ({
Top:top + ' px ',
Left:left + ' px '
});
},_maintainposition:function (status) {
if ($.popup.repositiononresize) {
Switch (status) {
Case true:
$ (window). Bind (' resize ', $.popup._reposition);
Break
Case false:
$ (window). Unbind (' resize ', $.popup._reposition);
Break
}
}
}}
Display loading information
showloading = function (msg, elem) {
var loadingmsg = msg | | ' Loading data, please wait ... ';
if (Elem = = null) {
$.popup.tip (' <table width= "100%" height= "100%" border= "0" cellpadding= "0" cellspacing= "0" ><tr> "+
' <td align= ' center ' ><img src= ' images/loading.gif '/> ' + loadingmsg + ' </td></tr></table > ', NULL, NULL, 0);
} else {
var middle = ($ (elem). Height ()-30)/2;
var top = $ (elem). Offset (). Top + (middle > 0 middle:0);
$.popup.tip (' <table width= "100%" height= "100%" border= "0" cellpadding= "0" cellspacing= "0" ><tr> "+
' <td align= ' center ' ><img src= ' images/loading.gif '/> ' + loadingmsg + ' </td></tr></table > ', top, NULL, 0);
}
}
Hidetip = function () {
$ ("#_popup_tip"). fadeout (500);
}
Showtip = function (msg, elem, AutoClose) {
if (Elem = = null) {
$.popup.tip (' <table width= "100%" height= "100%" border= "0" cellpadding= "0" cellspacing= "0" ><tr> "+
' <td align= ' center ' > ' + msg + ' </td></tr></table> ', null, NULL, autoclose);
} else {
var middle = ($ ("#" + elem). Height ()-50)/2;
var top = $ (' # ' + elem). Offset (). Top + (middle > 0 middle:0);
$.popup.tip (' <table width= "100%" height= "100%" border= "0" cellpadding= "0" cellspacing= "0" ><tr> "+
' <td align= ' center ' > ' + msg + ' </td></tr></table> ', top, NULL, autoclose);
}
}
Showhelper = function (Elem, title, MSG, height) {
$.popup.help (Elem, title, MSG, height);
}Showprompt = function (Elem, title, MSG, Isbuttonrow, Ispopup, callback, Top, left, width, height) {
$.popup.prompt (Elem, title, MSG, Isbuttonrow, Ispopup, callback, Top, left, width, height);
}}) (jquery);
</script><body>
<div style= "width:800px;margin:50px auto;" >
<h3 style= "height:30px;" >jquery Universal Dialog/popup Window plugin </h3>
<ul>
<li><a id= "h01" href= "Onmouseo tutorial ver=" showhelper (' #h01 ', ' Help topic ', ' multiple tag tags separated by half-width commas ') "onmouseout=" $ (' #_ Popup_help '). Remove () "Title= view Help" > Help window (automatically based on position) </a></li>
<li><a id= "h02" href= "onmouseover=" Showhelper (' #h02 ', ' Help topic ', ' multiple tag tags separated by half-width commas ',) "onmouseout=" $ (' #_ Popup_help '). Remove () "Title= view Help" > Help window (automatically based on position in head popup) </a></li>
</ul>
<ul>
<li><a id= "H11" href= "javascript:showloading ()" title= "View Help" > Show loading Information (default) </a>&nbsp;& Nbsp;&nbsp;&nbsp;<a href= "Javascript:hidetip ()" > Hidden Loading information </a></li>
<li><a id= "H12" href= javascript:showloading (' Submitting data ... ') > Displaying custom loading information (default) </a>&nbsp; &nbsp;&nbsp;&nbsp;<a href= "Javascript:hidetip ()" > Hidden Loading information </a></li>
<li><a id= "H13" href= javascript:showloading (' Loading list data ... ', ' #h13 ') > Display loading information in specified container (default) </a> &nbsp;&nbsp;&nbsp;&nbsp;<a href= "Javascript:hidetip ()" > Hidden Loading information </a></li>
<li><a id= "H14" href= "Javascript:showtip (' published successfully, experience + 5 ')" > Display tips </a>&nbsp;&nbsp;&nbsp ; &nbsp;<a href= "Javascript:hidetip ()" > Hide tip information </a></li>
<li><a id= "h15" href= javascript:showtip (' reply successful, experience + 1 ', null,1) ' > Show message (Auto Hide) </a></li>
</ul>
<ul>
<li><a id= "H21" href= javascript:showprompt (' #h21 ', ' dialog box ', ' Custom display content ', ' callback ') ' title= ' View Help > dialog Box </ A></li>
</ul>
</div>
</body>
SOURCE Download Address
Http://down.111cn.net/down/code/jquery/2010/0929/20991.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
