The cloud-dwelling community has published such code before, but it is not a big problem, but the version here is mainly to add some features, callback to execute the server side of the method, for ASP.net development or AJAX development are very valuable improvements.
First look at the effect of the picture:
the original Baidu Popup.js in there
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
There is a compatibility issue under the Web page under the ie6,7,8, where the mask layer is full screen, but not full screen masking under Firefox and Chrome.
causes the mask layer to not be full-screen under FF and Chrome in 267 lines:
Copy Code code as follows:
var C = ' <div id= ' dialogboxbg ' style= ' position:absolute;top:0px;left:0px;width:100%;height:100%;z-index: ' + A + '; H + "Background-color:" + this.color.cColor + ';d isplay:none; " ></div> ';
Mask Layer DIALOGBOXBG style is simply set to height:100%, so there is <! in the The pages under the Doctype...> declaration are not compatible with FF and Chrome.
However, there is a "Luocheng" on the Internet, "the perfect version" Popup.js, download down to try, the results are not fully compatible with FF and Chrome, or a mask layer can not full-screen bug, read the source code, found the error: Luocheng version of the added a GetValue method, the switch statement in the case "ClientHeight": there are two! Delete one to continue testing later, or not compatible with FF and Chrome, continue reading code error, add Setbackgroundsize method g (' Dialogboxbg '). Style.height = Getvalueheight; Just copy the height= integer value to the Mask layer dialogboxbg, which is not compliant with web standards, so there are bugs under FF and Chrome.
Copy Code code 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; modified to G (' Dialogboxbg '). Style.height = getvalueheight + "px";
so everyone later in the development process, pay attention to the width and height of the best plus ' px ';
Let's attach a different reference to getting the page height between browsers:
ClientHeight: In IE and FF, this property is no different, refers to the visual area of the browser, that is, remove the browser of those toolbar status bar remaining page display space height;
ScrollHeight: In IE, scrollheight is the actual content of the page height, can be less than clientheight; under FF, ScrollHeight is the content height of the Web page, but the minimum value is clientheight.
/*******************************************************/
Expansion method:
1. Pop-up confirmation box callback to execute server-side method
Copy Code code as follows:
function showconfirm (title, content, target)//Show confirmation dialog box
{
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: "Divcall",
Str:target,
Obj:pop
});
Pop.build ();
Pop.show ();
Popp = Pop;
return false;
}
//Execute server-side method, i.e. __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 ();
}
To traverse the button name in the page
function Geteachbtnname (obj) {
return obj.name = = ' ' | | Obj.name = null? Obj.id:obj.name;
}
How to use:
Register OnClientClick on a button control with onclick= "btnTest_Click" for return showconfirm (', ' Is it OK to delete?) ', this).
Complete code:
Copy Code code as follows:
<asp:button id= "Btndel" runat= "server" text= "delete" onclick= "Btndel_click" onclientclick= "return showconfirm (', ' Are you sure you want to delete? ', this) '/>
2. Use of popup.js in IFRAME
We have an IFRAME embedded in a page that wants the dialog box or confirmation box popped out of the iframe to pop out of the parent page, implement a mask layer full screen instead of just full-screen in the IFRAME page, and then confirm the callback operation IFRAME. Can be a server-side method that executes in an IFRAME.
Copy Code code as follows:
function Showconfirmiframe (title, content, target)//Show confirmation dialog box
{
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: "Divcall",
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 ();
}
How to use:
The JS method is defined in the IFRAME:
Copy Code code as follows:
Delete
function Subdel (obj)
{
return Parent.parentdel (obj);
}
button Button control Register OnClientClick event:
Copy Code code as follows:
<asp:button id= "Btndel" runat= "onclick=" Btndel_click "tooltip=" delete "cssclass=" deletebtn "OnClientClick=" Return Subdel (this); return false;/>
The parent page defines the JS method:
Copy Code code as follows:
function Parentdel (obj)
{
Return showconfirmiframe (' delete ', ' Is it OK to delete? ', obj);
}
The Popup.js evolutionary version and the generic revision download also fix the problem that is not fully compatible with FF and Chrome.
