无为清净楼资源网

javascript 弹出层组件（升级版）
网络编程 2024/11/18 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com
这次还是利用原来代码的组织结构重新加强了功能，目前来说还有两个小问题，第一个是ie6下自定义弹出层会出现无法遮住select的情况，目前还没加入到组件里，可以自己在自定义的div里面加上ifame来遮罩，组件自带的弹出层可以遮住。第二个问题，由于是绝对定位，所以在改变浏览器窗口大小的时候会出现无法自动跟随。大家试试就知道了，当然问题肯定不少，只是这两个我认为比较重要的，暂时列出来，以后修复。

下面是代码，里面都有注释，可以直接运行。
在线演示 http://demo.jb51.net/js/2011/js_popup_up/index.htm
复制代码 代码如下:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>lock page</title>
<meta name="author" content="www.planeart.cn" />
<link rel="stylesheet" type="text/css" href="style/css/j_dialog.css" />
<style>
body {padding:0; margin:0; font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,form, fieldset, legend, button, input, textarea,th, td {margin: 0;padding: 0;}
button, input, select, textarea {font: 12px/1.5 tahoma, arial, simsun, sans-serif;}
h1, h2, h3, h4, h5, h6 { font-size: 100%;font-weight:normal; }
address, cite, dfn, em, var { font-style: normal; }
code, kbd, pre, samp { font-family: courier new, courier, monospace; }
small { font-size: 12px; }
ul, ol { list-style: none; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
legend { color: #000; }
fieldset, img { border: 0; }
button, input, select, textarea { font-size: 100%; }
table { border-collapse: collapse; border-spacing: 0; }
.clear {clear:both;}
html { overflow:-moz-scrollbars-vertical; }
a { text-decoration: none;}
a:hover { text-decoration: underline;}

#pageOverlay {overflow:hidden;display:none;position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; }
.pageDialog{border: 4px solid #999999;display:none;position:fixed; top:40%; left:50%; z-index:1988;background:#fff;}
.pageDialog h3{padding-left:10px;overflow:hidden;font-size:14px;font-weight:normal;height:25px;line-height:25px;background:#666;color:#fff;zoom:1;}
.pageDialog h3 a{float:right;color:#ddd;display:inline;font-weight:bold;width:20px;text-align:center;margin-right:5px;}
.pageDialog h3 a:hover{ text-decoration: none;color:#fff;}
.pageDialog span{margin:10px;display: block;}
.pageDialog .confirm,.pageDialog .concel{display:inline-block;background:#ccc url(../images/DialogBtn.png) no-repeat;width:45px;height:25px;text-align:center;line-height:25px;font-weight:bold;margin-right:10px;}
.pageDialog .confirm:hover,.pageDialog .concel:hover{ text-decoration: none;}
.pageDialog .confirm{background-position:0 0;color:#000;}
.pageDialog .concel{background-position:-45px 1px;color:#000;display:none;}
.oprate{margin:20px 0 10px 0;text-align:center;}
#test li{display:inline;}
</style>
<script type="text/javascript">
function d_log(contents){
if(!(this instanceof d_log))
return new d_log(contents);
this.title=contents&&contents.title||"系统提示";//默认系统提示
this.con=contents&&contents.con||"";//默认弹出内容为空
this.wrap=contents&&contents.wrapId;//是否为自定义弹出层
this.confirm=contents&&contents.confirm;//是否需要确认按钮
this.wraphide=contents&&contents.wraphide||!1;//是否显示背景遮罩层
this.pos=contents&&contents.pos;//自带左右上下角的定位
if(document.getElementById('pageOverlay')){//公用一个cover层，这样避免冗余标签
this.cover=document.getElementById('pageOverlay');
}else{
this.cover=document.createElement('div');
this.cover.id='pageOverlay';
this.cover.style.display='none';
document.body.appendChild(this.cover);
}
this.dialog=document.createElement('div');//对话框
this.dialog.className='pageDialog';
document.body.appendChild(this.dialog);
this.init();
}
d_log.prototype.init=function(){
var self=this,c_height,l,t;
c_height=document.compatMode!="BackCompat" ? document.documentElement.clientHeight : document.body.clientHeight;
if(self.wrap){//如果有指定显示的层则把它加到弹出层中
self.dialog.appendChild(document.getElementById(self.wrap));
}else{//没有则重新构建一个弹出层
self.dialog.innerHTML='<div style="width:300px;"><h3><a class="d_dialog_close" href="javascript:;">x</a>'+self.title+'</h3>';
self.dialog.innerHTML+=self.con+"<p class='oprate'><a href='javascript:;' class='confirm'>确定</a><a href='javascript:;' class='concel'>取消</a></p></div>";
var _p = self.dialog.getElementsByTagName('p')[0];
if(self.confirm)
_p.lastChild.style.display='inline-block';
addEvent(_p.getElementsByTagName('a')[0],'click',function(){
self.close();
if(self.confirm)eval(self.confirm+'()');
});
addEvent(_p.getElementsByTagName('a')[1],'click',function(){
self.close();
});
addEvent(self.dialog.getElementsByTagName('a')[0],'click',function(){
self.close();
});
}
switch(self.pos){
case 'left-top':
l=0;
t=0;
break;
case 'left-bottom':
l=0;
t=c_height-parseInt(getSize(self.dialog).height);
break;
case 'right-top':
l=document.body.clientWidth-parseInt(getSize(self.dialog).width);
t=0;
break;
case 'right-bottom':
l=document.body.clientWidth-parseInt(getSize(self.dialog).width);
t=c_height-parseInt(getSize(self.dialog).height);
break;
default:
l=(document.body.clientWidth-parseInt(getSize(self.dialog).width))/2;
t=(c_height-parseInt(getSize(self.dialog).height))/2;
}
self.dialog.style.left=l+'px';
self.dialog.style.top=t+'px';
if(!window.XMLHttpRequest){
var body,clone,cover = self.cover;
var iframe = '<iframe width="100%" height="100%" frameborder="0" scrolling="no" style="z-index:1000; position: absolute; left: 0pt; top: 0pt;filter:alpha(opacity=0);"></iframe>';
self.dialog.style.position = 'absolute';
try{
document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
(function(){
body = document.body;
if (body.currentStyle.backgroundAttachment !== "fixed") {
if (body.parentNode.currentStyle.backgroundImage === "none") {
body.parentNode.runtimeStyle.backgroundRepeat = "no-repeat";
body.parentNode.runtimeStyle.backgroundImage = "url(about:blank)";
}
body.style.height='100%';
}
self.layer = document.createElement("<div style='position:absolute;z-index:1990;border:0;padding:0;margin:0;overflow:hidden;background:transparent;top:expression((document).documentElement.scrollTop);left:expression((document).documentElement.scrollLeft);width:expression((document).documentElement.clientWidth);height:expression((document).documentElement.clientHeight);display:none;'>");
})();
clone=self.dialog.cloneNode(true);
document.body.removeChild(self.dialog);
self.layer.appendChild(clone);
self.dialog=clone;
if(self.layer.parentNode!== body )
body.insertBefore(self.layer, body.childNodes[0]);
//self.dialog.innerHTML += iframe;
cover.innerHTML = iframe;
cover.style.cssText='position:absolute;left:expression((document).documentElement.scrollLeft);top:expression((document).documentElement.scrollTop);width:expression((document).documentElement.clientWidth);height:expression((document).documentElement.clientHeight);';
}
}
d_log.prototype.open=function(){
if(this.layer)
this.layer.style.display='block';
this.dialog.style.display='block';
if(!this.wraphide)
this.cover.style.display='block';
}
d_log.prototype.close=function(){
if(this.layer)
this.layer.style.display='none';
this.dialog.style.display='none';
this.cover.style.display='none';
}
function getSize(elem) {//获取元素的宽高，包括隐藏元素的
var width = elem.offsetWidth, height = elem.offsetHeight;
if ( !width && !height ) {
var style = elem.style;
var cssShow ="position:absolute;visibility:hidden;display:block;left:-9999px;top:-9999px;";
var cssBack ="position:"+style.position+";visibility:"+style.visibility+";display:"+style.display+";left:"+style.left+";top:"+style.top;
elem.style.cssText=cssShow;
width = elem.offsetWidth; height = elem.offsetHeight;
elem.style.cssText=cssBack;
}
return { "width": width, "height": height };
}
function addEvent(el,type,fn){ //绑定事件
var self = this;
if(el.attachEvent) {
el['e'+type+fn] = fn; //IE下拷贝元素引用,使this指向el对象而不是window
el[type+fn] = function(){el['e'+type+fn](window.event);}
el.attachEvent('on'+type, el[type+fn]);
}else
el.addEventListener(type, fn, false);
}
</script>
</head>

<body onload="dlg3.open()">
<ol id="test">
<li id="par" style="display:none;"><a id='no1' class="abc ggl" href="javascript:dlg1.open();">点击我试试</a></li>
<li><a href="javascript:dlg2.open();">自定义弹出层</a></li>
<li><a href="javascript:dlg1.open();">自带模态对话框</a></li>
<li><a href="javascript:dlg3.open();">右下角广告</a></li>
</ol>
<div id="result"></div>
<select><option label="1111111111">abcd111</option><option label="222222222">abcd222</option></select>
<div id="owp" style="width:300px;height:200px;">这是第二个测试例子！<a href="javascript:dlg2.close();">x</a></div>
<div id="owp1" style="width:200px;height:100px;">右下角广告<a href="javascript:dlg3.close();">x</a></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
<script>
//参数con为自带弹出框的内容，confirm为是否需要确认按钮，wraphide是否显示遮罩层，wrap自定义层id
var dlg1=d_log({con:'<span>确定要删除此文件吗？</span>',confirm:'check'});//自动生成的dialog
var dlg2=d_log({wraphide:'hide',wrapId:'owp'});//自定义的dialog
var dlg3=d_log({wraphide:'hide',wrapId:'owp1',pos:'right-bottom'});//pos弹出层的位置
var arr=[1,2,3,4,5,5,6,7,8];
function check(){
alert('test!');
}
</script>
标签：
javascript,弹出层组件
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接