This time using the original code's organizational structure to strengthen the function, at present, there are two small problems, the first is IE6 the custom pop-up layer will appear can not cover the Select Case, has not been added to the component, you can in the custom div inside add ifame to mask, The Assembly's own pop-up layer can be obscured. The second problem, because it is absolutely positioned, will not automatically follow when changing the size of the browser window. Everyone try to know, of course, there are certainly many problems, but these two I think more important, temporarily listed, later repair.
Here is the code, which has annotations that can be run directly.
<! Doctype>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>lock page</title>
<meta name= "Author" content= "www.planeart.cn"/>
<link rel= "stylesheet" type= "Text/css" href= "Style/css/j_dialog.css"/>
<style>
body {padding:0; margin:0; font:12px/1.5 Tahoma, Helvetica, Arial, Sans-serif;}
Body, H1, H2, H3, H4, H5, H6, HR, p, BLOCKQUOTE,DL, DT, DD, UL, OL, Li,pre,form, fieldset, Legend, button, input, textarea , Th, TD {Margin:0;padding:0;}
button, input, select, textarea {font:12px/1.5 tahoma, Arial, SimSun, Sans-serif;}
H1, H2, H3, H4, H5, h6 {font-size:100%;font-weight:normal;}
Address, cite, DFN, EM, var {font-style:normal;}
Code, KBD, Pre, Samp {font-family:courier new, Courier, Monospace;}
small {font-size:12px;}
UL, ol {List-style:none;}
sup {vertical-align:text-top;}
Sub {vertical-align:text-bottom;}
Legend {color: #000;}
FieldSet, img {border:0;}
button, input, select, textarea {font-size:100%}
Table {border-collapse:collapse; border-spacing:0;}
. clear {Clear:both;}
HTML {overflow:-moz-scrollbars-vertical;}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
#pageOverlay {overflow:hidden;display:none;position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; Background: #000; Filter:alpha (opacity=70); opacity:0.7; }
. pagedialog{border:4px solid #999999;d isplay:none;position:fixed top:40%; left:50%; Z-index:1988;background: #fff;}
. Pagedialog h3{padding-left:10px;overflow:hidden;font-size:14px;font-weight:normal;height:25px;line-height:25px Background: #666; color: #fff; zoom:1;}
. Pagedialog h3 A{float:right;color: #ddd;d isplay:inline;font-weight:bold;width:20px;text-align:center; margin-right:5px;}
. Pagedialog h3 a:hover{Text-decoration:none;color: #fff;}
. Pagedialog Span{margin:10px;display:block;}
. Pagedialog. Confirm,.pagedialog concel{display:inline-block;background: #ccc url (.. /images/dialogbtn.png) No-repeat;width:45px;height:25px;text-align:center;line-height:25px;font-weight:bold; margin-right:10px;}
. Pagedialog. Confirm:hover,.pagedialog. concel:hover{Text-decoration:none;
. Pagedialog. confirm{background-position:0 0;color: #000;}
. Pagedialog. concel{background-position:-45px 1px;color: #000;d isplay:none;}
. oprate{margin:20px 0 10px 0;text-align:center;}
#test Li{display:inline;}
</style>
<script type= "Text/javascript" >
function D_log (contents) {
if (!) ( This instanceof D_log))
return new D_log (contents);
this.title=contents&&contents.title| | " system prompts;//default system prompt
this.con=contents&&contents.con| | ""; /default popup content is empty
this.wrap=contents&&contents.wrapid;//whether it is a custom pop-up layer
this.confirm=contents&&contents.confirm;//If you need a confirmation button
this.wraphide=contents&&contents.wraphide| |! 1;//whether the background mask layer is displayed
Positioning of this.pos=contents&&contents.pos;//with left and right upper and lower angles
if (document.getElementById (' Pageoverlay ')) {//Common one cover layer, so as to avoid redundant tags
This.cover=document.getelementbyid (' Pageoverlay ');
}else{
This.cover=document.createelement (' div ');
This.cover.id= ' Pageoverlay ';
This.cover.style.display= ' None ';
Document.body.appendChild (This.cover);
}
This.dialog=document.createelement (' div ');//dialog box
This.dialog.classname= ' Pagedialog ';
Document.body.appendChild (This.dialog);
This.init ();
}
D_log.prototype.init=function () {
var self=this,c_height,l,t;
C_height=document.compatmode!= "Backcompat"? Document.documentElement.clientHeight:document.body.clientHeight;
if (self.wrap) {//If the specified display layer is added to the pop-up layer
Self.dialog.appendChild (document.getElementById (self.wrap));
}else{//not rebuild a pop-up layer
Self.dialog.innerhtml= ' <div style= ' width:300px; >self.dialog.innerhtml+=self.con+ "<p class= ' oprate ' ><a href= ' javascript:; ' class= ' confirm ' > OK </a ><a href= ' javascript:; ' class= ' Concel ' > Cancel </a></p></div> ';
var _p = self.dialog.getElementsByTagName (' P ') [0];
if (self.confirm)
_p.lastchild.style.display= ' Inline-block ';
Addevent (_p.getelementsbytagname (' a ') [0], ' click ', function () {
Self.close ();
if (self.confirm) eval (self.confirm+ ' () ');
});
Addevent (_p.getelementsbytagname (' a ') [1], ' click ', function () {
Self.close ();
});
Addevent (Self.dialog.getElementsByTagName (' a ') [0], ' click ', function () {
Self.close ();
});
}
Switch (self.pos) {
Case ' Left-top ':
l=0;
t=0;
Break
Case ' Left-bottom ':
l=0;
T=c_height-parseint (GetSize (self.dialog). height);
Break
Case ' Right-top ':
L=document.body.clientwidth-parseint (GetSize (self.dialog). width);
t=0;
Break
Case ' Right-bottom ':
L=document.body.clientwidth-parseint (GetSize (self.dialog). width);
T=c_height-parseint (GetSize (self.dialog). height);
Break
Default
L= (Document.body.clientwidth-parseint (GetSize (self.dialog). width))/2;
T= (C_height-parseint (GetSize (self.dialog). Height))/2;
}
self.dialog.style.left=l+ ' px ';
self.dialog.style.top=t+ ' px ';
if (!window. XMLHttpRequest) {
var body,clone,cover = Self.cover;
var iframe = ' <iframe width= ' 100% ' height= ' 100% ' frameborder= ' 0 ' scrolling= ' no ' style= ' z-index:1000; Position:absolute; left:0pt; Top:0pt;filter:alpha (opacity=0); " ></iframe> ';
self.dialog.style.position = ' absolute ';
try{
Document.execcommand ("Backgroundimagecache", false, true);
}catch (e) {}
(function () {
BODY = document.body;
if (body.currentStyle.backgroundAttachment!== "fixed") {
if (Body.parentNode.currentStyle.backgroundImage = = "None") {
Body.parentNode.runtimeStyle.backgroundRepeat = "No-repeat";
body.parentNode.runtimeStyle.backgroundImage = "url (about:blank)";
}
body.style.height= ' 100% ';
}
Self.layer = document.createelement ("<div style= ' Position:absolute;z-index:1990;border:0;padding:0;margin:0;o Verflow:hidden;background:transparent;top:expression ((document). Documentelement.scrolltop); Left:expression ( Document). Documentelement.scrollleft); Width:expression ((document). Documentelement.clientwidth); Height: Expression (document). Documentelement.clientheight);d Isplay:none; > ");
})();
Clone=self.dialog.clonenode (TRUE);
Document.body.removeChild (Self.dialog);
Self.layer.appendChild (clone);
Self.dialog=clone;
if (self.layer.parentnode!== body)
Body.insertbefore (Self.layer, body.childnodes[0]);
Self.dialog.innerHTML = iframe;
cover.innerhtml = iframe;
cover.style.csstext= ' Position:absolute;left:expression (document). Documentelement.scrollleft); Top:expression ( Document). Documentelement.scrolltop); Width:expression ((document). Documentelement.clientwidth); Height: Expression ((document). Documentelement.clientheight); ';
}
}
D_log.prototype.open=function () {
if (This.layer)
this.layer.style.display= ' block ';
this.dialog.style.display= ' block ';
if (!this.wraphide)
this.cover.style.display= ' block ';
}
D_log.prototype.close=function () {
if (This.layer)
This.layer.style.display= ' None ';
This.dialog.style.display= ' None ';
This.cover.style.display= ' None ';
}
function GetSize (elem) {//Gets the width of the element, including the hidden element.
var width = elem.offsetwidth, height = elem.offsetheight;
if (!width &&!height) {
var style = Elem.style;
var cssshow = "position:absolute;visibility:hidden;display:block;left:-9999px;top:-9999px;";
var cssback = "Position: +style.position+"; Visibility: "+style.visibility+";d isplay: "+style.display+"; Left: "+ Style.left+ "; Top:" +style.top;
Elem.style.csstext=cssshow;
width = elem.offsetwidth; Height = elem.offsetheight;
Elem.style.csstext=cssback;
}
return {"width": width, "height": height};
}
function Addevent (EL,TYPE,FN) {//binding event
var self = this;
if (el.attachevent) {
el[' e ' +type+fn] = fn; IE copy element reference so that this points to the El object instead of window
EL[TYPE+FN] = function () {el[' E ' +type+fn] (window.event);}
El.attachevent (' On ' +type, EL[TYPE+FN]);
}else
El.addeventlistener (Type, FN, false);
}
</script>
<body onload= "Dlg3.open ()" >
<ol id= "Test" >
<li id= "par" style= "display:none;" ><a id= ' No1 ' class= "ABC Ggl" href= "Javascript:dlg1.open ();" > Click me to try </a></li>
<li><a href= "Javascript:dlg2.open ();" > Custom Pop-up Layer </a></li>
<li><a href= "Javascript:dlg1.open ();" > Self-modal dialog box </a></li>
<li><a href= "Javascript:dlg3.open ();" > Lower right corner advertisement </a></li>
</ol>
<div id= "Result" ></div>
<select><option label= "1111111111" >abcd111</option><option label= "222222222" >abcd222< /option></select>
<div id= "OWP" style= "width:300px;height:200px;" > This is the second Test example! <a href= "Javascript:dlg2.close ();" >x</a></div>
<div id= "OWP1" style= "width:200px;height:100px;" > Lower right corner advertising <a href= "Javascript:dlg3.close ();" >x</a></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
<script>
Argument con is the content with the pop-up box, confirm whether you want to confirm the button, wraphide whether to show the mask layer, wrap the custom layer ID
var dlg1=d_log ({con: ' <span> are you sure you want to delete this file?) </span> ', confirm: ' Check '};//automatically generated dialog
var dlg2=d_log ({wraphide: ' Hide ', wrapid: ' OWP '});//Custom Dialog
var dlg3=d_log ({wraphide: ' Hide ', wrapid: ' Owp1 ', pos: ' Right-bottom '});//pos the location of the pop-up layer
var arr=[1,2,3,4,5,5,6,7,8];
function Check () {
Alert (' test! ');
}
</script>
