JS pop-up box plug-in instance and code use method

JS pop-up box plug-in instance and code use method
How to use:

1. Call the jquery library and the Zxxbox plug-in file, as follows:

<script type= "text/web Effects" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></ Script><script type= "Text/javascript" src= "/study/js/jquery.zxxbox.2.0.js" ></script>

2. Call the Zxxbox () method, the simplest use is as follows:
$ ("#test"). Zxxbox ();
The result is that the element with ID "test" is loaded into the box and displayed in the center of the page.

Four, plug-in API use and description (not to be missed)
jquery Pop-up plugin zxxbox parameter usage instructions

Title Description Default
Title String dialog Box Caption Text dialog box
Shut the upper-right corner of the string to close the button's display X
Bar Boolean displays the title bar, for example, you can use true when loading pictures
Closeable Boolean Click on the background layer (if any) to close the dialog box true
Fix Boolean pop-up box is positioned fixed, does not scroll with scroll bar (IE6 is invalid) false
Does BG Boolean show background layer true
Drag Boolean type can be clicked on the title bar to drag False
Z-index level 2000 of the Index Value dialog box
Opacity value Black semitransparent background Transparency 0.5
Whether the Ask Boolean displays false with the default question-and-answer dialog box
Whether the remind Boolean displays false with the default content reminder
Asktext string The content of the prompt when the default quiz is displayed do you confirm doing this?
Remindtext the contents of a reminder when the default reminder for a string you have not entered the contents of the reminder.
Delay the time when the value is timed off, 0 is not closed, greater than 0 is off time, unit millisecond 0
Closeo Tutorial Bject object or Object array Bind dialog box Close event's Object []-empty array

A few additional notes:

The button style for the default dialog box has been shown in CSS tutorial, and if you are not satisfied, you can modify the CSS string portion of the original JS.
For triggering the default "ask" or "remind" dialog box, you can use any existing object trigger, for example, you can use $ ("body"). Zxxbox ({ask:true});
If you use the Ask argument, to implement the default dialog box prompt effect, the provided confirmation button has an ID of "surebtn", and you can use $ ("#surebtn") to bind related events to this button, and you need to be aware that this event should be placed inside the event function of the pop-up dialog box.
For the "delay" argument, the policy here is that if the size is 0, it is considered not to perform a delay automatic shutdown, or the automatic shutdown of the dialog box in milliseconds
For the "closeobject" parameter, the button that is used to bind is closed, the default binding has a semitransparent background (if closeable is true), the upper-right corner closes the button, the default (or CANCELBTN-id) Cancel button, You can use this parameter to bind other buttons that can trigger a closed dialog box, such as: {closeobject: [$ ('. a ')], $ (". B")]} when all the buttons containing a and class class containing B are clicked, the dialog box closes
The plug-in does not provide a good callback shutdown time, you can use a similar $ ("#test"). Zxxbox ({delay:10}); code triggers the Shutdown event (delay is critical, $ ("#test") is the current Mount object).
More comprehensive examples of use (for beginners to see)
Use the JS code as follows:

<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></ Script><script type= "Text/javascript" >
Zxxbox.js v1.0 2010-03-20
©2010 by Zhangxinxu http://www.zhangxinxu.com/
v1.1 2010-04-03 #添加拖拽参数
v1.2 2010-07-12 #修改浏览器高宽以及页面滚动高度获取方法

(function ($) {
Load CSS styles for a page
 var css = ' <style type= ' text/css ' > #blank {position:absolute; z-index:2000; left:0; top:0; height : 0; Background:black}. Wrap_out{position:absolute padding:5px; background: #eee; z-index:2000; Wrap_in{background: #fafafa; border:1px solid #ccc; wrap_bar{width:100% background: #f7f7f7; border-top:3px solid #f9f9f9; border-bottom:3px solid #eeeeee; margin-top:2px ;}. WRAP_TITLE{LINE-HEIGHT:4PX background: #f3f3f3; border-top:4px solid #f5f5f5; border-bottom:5px solid #f1f1f1; MARGIN-TOP:3PX}. Wrap_title span{position:relative; margin-left:10px; wrap_body{border-top:1px solid #ddd; background:white;}. Wrap_close{color: #34538b; float:right; font-weight:bold; margin-right:10px; margin-top:-15px; font-family:black Arial Text-decoration:none}. Wrap_close:hover{text-decoration:none color: #f30;}. Wrap_remind{width:16em padding:30px 40px 20px; Wrap_remind p{margin:20px 0 0;}. Submit_btn{display:-moz-inline-stack display:inline-block; padding:3px 12px 1.99px; background: #486AAA; BORDER:1PX solid; Border-color: #a0b3d6 #34538b #34538b #a0b3d6; Color: #f3f3f3; line-height:16px; Cursor:pointer; Overflow:visible}. Submit_btn:hover{text-decoration:none color: #ffffff;}. Cancel_btn{display:-moz-inline-stack display:inline-block; padding:3px 12px 1.99px background: #eee; border:1px Solid Border-color: #f0f0f0 #bbb #bbb #f0f0f0; Color: #333; line-height:16px; Cursor:pointer; overflow:visible;} </style> ';
$ ("Head"). Append (CSS);

$.fn.zxxbox = function (options) {
var that = $ (this);
options = Options | | {};
var defaults = {
Title: "dialog Box",
Shut: "X",
Bar:true,
Closeable:true,
Fix:false,
Bg:true,
Drag:false,
index:2000,
opacity:0.5,
Ask:false,
Remind:false,
Asktext: "Are you sure this is done?" ",
Remindtext: "You have not entered the contents of the reminder." ",
delay:0,
Closeobject: []
};
var settings = $.extend ({}, defaults, options);
If it's a simple dialog box or a text reminder
if (settings.ask) {
Settings.main = $ (' <div class= "wrap_remind" > ' +settings.asktext+ ' <p><button id= "" Surebtn " Submit_btn "> Confirm </button>&nbsp;&nbsp;<button id=" cancelbtn "class=" Cancel_btn "> Cancel </ Button></p></div> ');
}else if (settings.remind) {
Settings.main = $ (' <div class= "wrap_remind" > ' +settings.remindtext+ ' <p><button id= "" Submitbtn " Submit_btn "> Confirmation </button</p></div>");
}else{
That.show ();
Settings.main = that;
}
var wrap = ' <div id= ' blank "></div><div class=" Wrap_out "id=" wrapout "><div class=" wrap_in "id=" Wrapin "><div id=" Wrapbar class= "Wrap_bar" ><div class= "Wrap_title" ><span> ' +settings.title+ ' </span></div><a href= "javasctipt:void (0);" class= "Wrap_close" id= "Wrapclose" > ' +settings.shut+ ' </a></div><div class= "Wrap_body" id= "Wrapbody" ></div></div></div>;
Loading content
if ($ ("#wrapout"). Length) {//Prevent two load
if (!$ ("#blank"). Length && settings.bg) {
$ ("Body"). Prepend (' <div id= ' blank ' ></div> ');
}
$ ("#wrapout"). Show ();
}else{
$ ("Body"). prepend (wrap);
$ ("#wrapbody"). Append (Settings.main);
if (!settings.bar) {
$ ("#wrapbar"). Hide ();
}
Do some processing on black backgrounds
$ ("#blank"). each (function () {
First, determine the height of the page, if the page height is less than the height of the browser display area, then use the browser to display the height of the area
Settings.cheight = $ (window). Height ();
Settings.cwidth = $ (window). width (); Browser Display area width

Settings.bgheight = ($ ("body"). Height () > Settings.cheight)? $ ("body"). Height (): settings.cheight;
Determine if background is displayed
if (settings.bg) {
$ (this). CSS ({
Zindex:settings.index,
Opacity:settings.opacity,
Height:settings.bgheight,
Width: "100%"
});
}else{
$ (this). Remove ();
}
});
Center Position of Pop-up box
$ ("#wrapout"). each (function () {
Gets the height and width of the pop-up content
$ ("Body"). Append (' <div id= "Wrapclone" style= "Position:absolute; left:-3000px;" ></div> ');
$ ("#wrapclone"). Append (Settings.main.clone ());
var w = $ ("#wrapclone"). Width () + 2, h = $ (this). Height ();
var stop = $ (document). ScrollTop ();
var t = stop + (settings.cheight-h)/2, L = (settings.cwidth-w)/2;
$ (this). CSS ({
Width:w,
Height:h,
Left:l,
Top:t,
Zindex:settings.index
});
if (Settings.fix && window.xmlhttprequest) {
$ (this). CSS ("position", "fixed");
}
$ ("#wrapclone"). Remove ();
});
Drag
if (Settings.drag) {
var drag = false;
var currentx = 0, currenty=0, Posx = $ ("#wrapout"). CSS ("left"), Posy = $ ("#wrapout"). CSS ("top");
$ ("#wrapbar"). MouseDown (function (e) {
drag = true;
document.getElementById ("Wrapout"). onselectstart = function () {
return false;
}
CurrentX = E.clientx;
CurrentY = E.clienty;
});
$ (document). MouseMove (function (e) {
if (drag) {
var nowx = e.clientx, Nowy = E.clienty;
var disx = nowx-currentx, Disy = Nowy-currenty;
$ ("#wrapout"). CSS ("left", parseint (POSX) + DISX);
$ ("#wrapout"). CSS ("Top", parseint (posy) + Disy);
}
});
$ (document). MouseUp (function () {
drag = false;
POSX = $ ("#wrapout"). CSS ("left");
Posy = $ ("#wrapout"). CSS ("top");
});
}
}
Some of the Click event handling, that is, with the hidden
var Wraphidden = function () {
if (!settings.ask &&!settings.remind) {
Settings.main.hide (). Appendto ($ ("body"));
}
$ ("#wrapout"). Remove ();
if ($ ("#blank"). Length) {
$ ("#blank"). Remove ();
}
return false;
};
Click on hidden elements: Close button, black background (default), OK to cancel button
$ ("#wrapclose"). Bind ("click", Wraphidden). each (function () {
if (Settings.shut!== "x") {
$ (this). CSS ("Font", "12px/14px normal Arial");
}
});
$ ("#submitbtn"). Bind ("click", Wraphidden);
$ ("#cancelbtn"). Bind ("click", Wraphidden);
if (settings.closeable) {
$ ("#blank"). Bind ("click", Wraphidden);
}
If automatically timed off
if (parseint (Settings.delay)) {
SetTimeout (Wraphidden, Settings.delay);
}
Provides a closed interface
if (settings.closeobject.length) {
var L = settings.closeobject.length;
for (var i=0; i<l; i+=1) {
Settings.closeobject[i].bind ("click", Wraphidden);
}
}
};
}) (jquery);

</script>
<script type= "Text/javascript" >$ (function () {
$ ("#test"). Click (function () {
$ (this). Zxxbox ({
Ask:true,
Asktext: "Are you sure you want to change the display value of this button?" ",
Fix:true,
Closeable:false
});
$ ("#surebtn"). Click (function () {
$ ("#test"). Text ("My value has changed and the dialog box will automatically disappear!"). ");
Alert ("Modified successfully!") Click this OK, the dialog box disappears for 2 seconds ");
$ (this). Zxxbox ({delay:2000});
});
});
});
</script>

The HTML code is as follows:

<button id= "Test" > Change my value </button>