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 相关文章推荐
用于判断用户注册时,密码强度的JS代码
Jan 01 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
Extjs学习笔记之七 布局
Jan 08 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
node.js中的fs.fstatSync方法使用说明
Dec 15 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
canvas实现图像截取功能
Feb 06 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 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
基于文本的留言簿
2006/10/09 PHP
Cakephp 执行主要流程
2010/03/24 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
JavaScript null和undefined区别分析
2009/10/14 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
layui实现点击按钮给table添加一行
2018/08/10 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
python调用百度语音识别api
2018/08/30 Python
对python中的argv和argc使用详解
2018/12/15 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
银行简历自我评价
2014/02/11 职场文书
法人委托书范本格式
2014/09/15 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
离婚协议书标准格式
2014/10/04 职场文书
公司员工辞职信范文
2015/05/12 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript