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


Posted in Javascript onAugust 08, 2013

这两天要用到正好练练手,比想象中碰到的问题要多,比如:
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没有透明度 这里我上网搜到的结果都不能解决 如果您有方法请给我留言

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Js制作简单弹出层DIV在页面居中 中间显示 遮罩 方法</title>
<style type="text/css">
*{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;}
</style>
</head>
<body>
<a id="bt">点击弹出div</a>
<div style="height:1000px;">
sdfdsf
<select>
<option>Volvo</option>
<option selected="selected">Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
</div>
<a id="bt">点击弹出div</a>
<div style="height:1000px;">
sdfdsf
<select>
<option>Volvo</option>
<option selected="selected">Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
</div>
<div id="orderMsg" class="orderMsg" style="display: none;">
<dl>
<dt>请您告知我们取消订单的原因,以便我们改进。非常感谢!</dt>
<dd><input type="radio" name="reason" id="reason1"><label for="reason1">改变主意,现在不想买了</label></dd>
<dd><input type="radio" name="reason" id="reason2"><label for="reason2">刚才信息填错了,要重新下单</label></dd>
<dd><input type="radio" name="reason" id="reason3"><label for="reason3">先取消,再更换或添加新商品</label></dd>
<dd><input type="radio" name="reason" id="reason4"><label for="reason4">网银,信用卡等支付有问题</label></dd>
<dd><input type="radio" name="reason" id="reason5"><label for="reason5">等待时间过长,不耐烦了</label></dd>
<dd><input type="radio" name="reason" id="reason6"><label for="reason6">商品价格较贵</label></dd>
<dd><input type="radio" name="reason" id="reason7"><label for="reason7">出现商品缺货情况</label></dd>
<dd><input type="radio" name="reason" id="reason8"><label for="reason8">其它的原因</label></dd>
<dd><input type="radio" disabled="disabled"><label>72小时到期自动取消(不可选)</label></dd>
<dd class="cBtn lBtn"><a href="#">选好了</a></dd><dd class="cBtn rBtn"><a href="#" onclick="" id="close">点击取消</a></dd>
</dl>
</div>
<script type="text/javascript">
/*
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");
</script>
</body>
</html>
Javascript 相关文章推荐
JavaScript设置FieldSet展开与收缩
May 15 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
JS+css 图片自动缩放自适应大小
Aug 08 #Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 #Javascript
js获得地址栏?问号后参数的方法
Aug 08 #Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 #Javascript
js动态创建、删除表格示例代码
Aug 07 #Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 #Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 #Javascript
You might like
微信公众平台天气预报功能开发
2014/07/06 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
List Installed Hot Fixes
2007/06/12 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Python之读取TXT文件的方法小结
2018/04/27 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
铁路工务反思材料
2014/02/07 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
综治目标管理责任书
2015/05/11 职场文书
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL
Nginx HTTP跳转至HTTPS
2022/05/15 Servers