html按钮在屏幕中间弹出一张图片,Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法...

这两天要用到正好练练手,比想象中碰到的问题要多,比如:

ie6背景透明 ie6居中显示 还有对js对象的理解

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没有透明度 这里我上网搜到的结果都不能解决 如果您有方法请给我留言

Js制作简单弹出层DIV在页面居中 中间显示 遮罩 方法

*{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;}

点击弹出div

sdfdsf

Volvo

Saab

Mercedes

Audi

点击弹出div

sdfdsf

Volvo

Saab

Mercedes

Audi

请您告知我们取消订单的原因，以便我们改进。非常感谢!

改变主意,现在不想买了

刚才信息填错了,要重新下单

先取消,再更换或添加新商品

网银,信用卡等支付有问题

等待时间过长,不耐烦了

商品价格较贵

出现商品缺货情况

其它的原因

72小时到期自动取消(不可选)

选好了

点击取消

/*

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(openID,conID,closeID){

this.onclick(openID,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(openID,conID,closeID){

var that = this;

_CalF.$(openID).onclick = function(){

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("bt","orderMsg","close");