JAvascriptポップアップモードレイヤ
4789 ワード
/*
openID= ,conID= div,closeID=
:
1. ie6 select ie6 div
2. div
:
1. .class #id
2. div css
3. ie6 css
div {_position: absolute;_top: expression(documentElement.scrollTop + 340 + "px"); }
4.ie6 div
*/
var _CalF = { //
$ : function(id){return document.getElementById(id)},
create : function(id){return document.createElement(id)},
append : function(id){return document.body.appendChild(id)},
remove : function(id){return document.body.removeChild(id)}
}
function popup(conID,closeID){
this.onclick(conID,closeID);
}
popup.prototype = {
cssStyle : "width:100%;position:absolute;left:0;top:0;filter:alpha(opacity = 50);opacity:0.5;border:0;overflow:auto;",
createShadowDiv : function(){ //
var shadowDiv = _CalF.create("div");
shadowDiv.id = "shadowDiv";
shadowDiv.style.cssText = this.cssStyle;
shadowDiv.style.height = document.body.scrollHeight + "px";
shadowDiv.style.backgroundColor = "#000"
shadowDiv.style.zindex = 100;
_CalF.append(shadowDiv);
},
createIframe : function(){ //iframe
var iframe = _CalF.create("iframe");
iframe.id = "shadowIframe";
iframe.style.cssText = this.cssStyle;
iframe.style.height = document.body.scrollHeight + "px";
iframe.style.zindex = 99;
_CalF.append(iframe);
},
removeDiv : function(){
_CalF.remove(_CalF.$("shadowDiv"));
_CalF.remove(_CalF.$("shadowIframe"));
},
onclick : function(conID,closeID){
var that = this;
if(window.ActiveXObject){ //ie6
if(!window.XMLHttpRequest){
document.body.style.cssText = "_background-image: url(about:blank);_background-attachment: fixed;";
}
}
that.createIframe();
that.createShadowDiv();
_CalF.$(conID).style.display = "block";
document.getElementById(closeID).onclick = function(){
_CalF.$(conID).style.display = "none";
that.removeDiv();
}
}
}
var bt = new popup("orderMsg","close");
--js
--html
*{margin:0;padding:0;}
#bt{border: 2px solid #000;background-color: #ccc;cursor: pointer;padding: 2px 5px;}
/**** *****/
.orderMsg{ position:fixed;_position: absolute;_top: expression(documentElement.scrollTop + 340 + "px"); background:#fff; border:1px solid #939395; width:500px; height:340px;top: 50%;left: 50%;margin: -200px 0 0 -250px; overflow:hidden; z-index:99999; font-size:14px; color:#000; display:none;}
.orderMsg dl{ overflow:hidden; padding:20px; margin:0;}
.orderMsg dl dt{ line-height:30px;}
.orderMsg dl dd{ line-height:25px; height:25px; padding-left:10px; margin:0;}
.orderMsg dl dd label{ padding-left:5px;}
.orderMsg dl dd.cBtn{ width:102px; height:28px; background:url(../images/member/chooseBtn.gif) no-repeat; margin-top:10px; padding:0;}
.orderMsg dl dd.cBtn a{ display:block; text-align:center;}
.orderMsg dl dd.cBtn a:link,.orderMsg dl dd.cBtn a:visited{ color:#000;}
.orderMsg dl dd.lBtn{ float:left; display:inline; margin-left:100px;}
.orderMsg dl dd.rBtn{ float:left; display:inline; margin-left:10px;}
--css