Baidu Popup. js pop-up box evolutionary version drag-and-drop small framework release compatible with IE6/7/8, Firefox, Chrome_javascript skills

The pop-up window and drag-and-drop effect of Baidu space (that is, popup. js), the code is streamlined, and the effect is also good. We can see this effect on many large websites, and this js is also used in my project. This kind of code has been released before, but it is not a problem, but the version here mainly adds some features and calls back the method of executing the server, it is a very valuable improvement for asp.net development or ajax development.
Let's take a look at it first:


The original Baidu Popup. js has

The Code is as follows:

The declared webpage has compatibility issues. In IE6, 7, and 8, the mask layer can be full screen, but it cannot be full screen in Firefox or Chrome.
The problem that the mask layer cannot be full screen in FF and Chrome is caused by row 3:

The Code is as follows:

Var C ='

';

The style of the dialogBoxBG mask layer is simply set to height: 100%.The declared page is not compatible with FF and Chrome.
However, there is a "luocheng" "perfect version" popup on the Internet. js. After downloading and trying it out, the results are not fully compatible with FF and Chrome. There is a bug that the mask layer cannot be full screen. After reading the source code, I found the error: the luocheng version adds a getValue method. In the switch statement, case "clientHeight": Actually there are two! Delete one and continue the test. It is still not compatible with FF and Chrome. Continue to read the code troubleshooting. In the added setBackgroundSize method, G ('dialogboxbg '). style. height = getValueHeight; only the height = integer copied to the dialogBoxBG mask layer. This does not comply with web standards, so there is a bug in FF and Chrome.

The Code is as follows:

SetBackgroundSize: function (){
Var getValueWidth;
Var getMaxValueWidth = [getValue ("clientWidth"), getValue ("scrollWidth")];
GetValueWidth = eval ("Math. max (" + getMaxValueWidth. toString () + ")");
G ('dialogboxbg '). style. width = getValueWidth;
Var getValueHeight;
Var getMaxValueHeight = [getValue ("clientHeight"), getValue ("scrollHeight")];
GetValueHeight = eval ("Math. max (" + getMaxValueHeight. toString () + ")");
G ('dialogboxbg '). style. height = getValueHeight ;},

The solution is simple: G ('dialogboxbg '). style. height = getValueHeight; change to G ('dialogboxbg'). style. height = getValueHeight + "px.
Therefore, in the future development process, it is best to add 'px 'to the width and height.

See the following link for more information about the differences between different browsers:
ClientHeight: in IE and FF, this attribute is no different. It refers to the visible area of the browser, that is, the height of the page display space remaining in the toolbar status bar of the browser;
ScrollHeight: in IE, scrollHeight is the actual content height of the page, which can be smaller than clientHeight; In FF, scrollHeight is the content height of the page, but the minimum value is clientHeight.
/*************************************** ****************/
Expansion Method:
1. the confirmation box pops up to call back the method for executing the server.

The Code is as follows:

Function ShowConfirm (title, content, target) // The confirmation dialog box is displayed.
{
Var pop = new Popup ({
ContentType: 3,
IsReloadOnClose: false,
Width: 350,
Height: 110
});
Pop. setContent ("title", title );
Pop. setContent ("confirmCon", content );
Pop. setContent ("callBack", ShowCallBackServer); // callBack function
Pop. setContent ("parameter ",{
Id: "pCall ",
Str: target,
Obj: pop
});
Pop. build ();
Pop. show ();
Popp = pop;
Return false;
}
// Execute the server method, that is, the _ doPostBack ('','') operation.
Function ShowCallBackServer (para ){
Var str = para ["str"];
If (""! = Str & null! = Str ){
Str = GetEachBtnName (str );
If (""! = Str & null! = Str ){
// Alert (str );
_ DoPostBack (str ,'');
}
}
ClosePop ();
}
// Traverse the Button name on the page
Function GetEachBtnName (obj ){
Return obj. name = ''| obj. name = null? Obj. id: obj. name;
}

Usage:
Register OnClientClick as return ShowConfirm ('', 'Are you sure you want to delete it on a Button control with OnClick =" btnTest_Click? ', This ).
Complete code:

The Code is as follows:

2. Use popup. js in iframe
We embedded an iframe in a page, and wanted the pop-up dialog box or confirmation box in the iframe to pop up in the parent page to enable the full screen of the mask layer instead of the full screen on the iframe page, after confirmation, execute the callback operation iframe, which can be the server method in the iframe.

The Code is as follows:

Function ShowConfirmIFrame (title, content, target) // The confirmation dialog box is displayed.
{
Var pop = new Popup ({
ContentType: 3,
IsReloadOnClose: false,
Width: 350,
Height: 110
});
Pop. setContent ("title", title );
Pop. setContent ("confirmCon", content );
Pop. setContent ("callBack", ShowIFrame); // callBack function
Pop. setContent ("parameter ",{
Id: "pCall ",
Str: target,
Obj: pop
});
Temp = target;
Pop. build ();
Pop. show ();
Popp = pop;
Return false;
}
Var temp;
Function ShowIFrame (){
Parent. frames ["content"]. window. ShowCallBackServerIFrame (temp );
// Parent. window. iframe. ShowCallBackServer ();
}
Function ShowCallBackServerIFrame (para ){
Var str = para;
If (""! = Str & null! = Str ){
Str = GetEachBtnName (str );
If (""! = Str & null! = Str ){
_ DoPostBack (str ,'');
}
}
CloseWin ();
}

Usage:
The js method defined in iframe:

The Code is as follows:

// Delete
Function subDel (obj)
{
Return parent. parentDel (obj );
}

The Button control registers the OnClientClick event:

The Code is as follows:

The parent page defines the js method:

The Code is as follows:

Function parentDel (obj)
{
Return ShowConfirmIFrame ('delete', are you sure you want to delete it? ', Obj );
}

The download of the popup. js evolutionary version and the general revised version also corrected the issue that the above mentioned version is not fully compatible with FF and Chrome.