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 相关文章推荐
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
jquery实现图片切换代码
Oct 13 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
php读取数据库信息的几种方法
2008/05/24 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
js判断变量是否未定义的代码
2020/03/28 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
python 远程统计文件代码分享
2015/05/14 Python
python实现验证码识别功能
2018/06/07 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
django使用admin站点上传图片的实例
2019/07/28 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
酒店管理毕业生自荐信
2014/05/25 职场文书
医院搬迁方案
2014/06/14 职场文书
小学清明节活动总结
2014/07/04 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
入队仪式主持词
2015/07/04 职场文书
职工宿舍管理制度
2015/08/05 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python
Python的property属性详细讲解
2022/04/11 Python