弹出对话框

很久没更新博客了，一则最近项目紧没太多时间，二则将近年底人心浮躁；

这个弹出框几周前就写了，只是一直没完善，当然现在也是比较简陋的版本，在要求不高的场合中凑合着应用。

主要问题是要兼容ie6下fixed的效果，其他浏览求直接position：fixed即可实现在网页中固定位置跟随浏览器滚动并且不会闪烁。

先看实现的效果：

以下是js代码：

 

代码

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.wrap;
this .confirm = contents && contents.confirm;
this .init();
}
d_log.prototype.init = function (){
var self = this ,c_height;
c_height = document.compatMode != " BackCompat " ? document.documentElement.clientHeight : document.body.clientHeight;
if (getEl( ' #pageOverlay ' )){ // 公用一个cover层，这样避免冗余标签
self.cover = getEl( ' #pageOverlay ' );
} else {
self.cover = document.createElement( ' div ' );
self.cover.id = ' pageOverlay ' ;
document.body.appendChild(self.cover);
}
if ( ! self.dialog){
self.dialog = document.createElement( ' div ' );
self.dialog.className = ' pageDialog ' ;
}
if (self.wrap){ // 如果有指定显示的层则把它加到弹出层中
self.dialog.appendChild(getEl(self.wrap));
document.body.appendChild(self.dialog);
} else { // 没有则重新构建一个弹出层
self.dialog.innerHTML = ' <h3><a class="d_dialog_close" href="javascript:;">x</a> ' + self.title + ' </h3> ' ;
self.dialog.innerHTML += self.con + " <p id='oprate'><a href='javascript:;' class='confirm'>确定</a><a href='javascript:;' class='concel'>取消</a></p> " ;
document.body.appendChild(self.dialog);
if (self.confirm)getEl( ' #oprate ' ).lastChild.style.display = ' inline-block ' ;
var cl = getEl( ' .d_dialog_close ' );
getEl( ' #oprate ' ).firstChild.onclick = function (){
self.close();
if (self.confirm)eval(self.confirm + ' () ' );
}
getEl( ' #oprate ' ).lastChild.onclick = function (){
self.close();
}
for ( var i = 0 ;i < cl.length;i ++ )
cl[ 0 ].onclick = function (){self.close();}
}
self.dialog.style.left = (document.body.clientWidth - parseInt(getSize(self.dialog).width)) / 2+'px';
self.dialog.style.top = (c_height - parseInt(getSize(self.dialog).height)) / 2+'px';
if ( ! window.XMLHttpRequest){ // 处理ie6下position:fixed的问题
document.execCommand( ' BackgroundImageCache ' , false , true );
var cover = self.cover;
self.dialog.style.position = ' absolute ' ;
cover.style.position = ' absolute ' ;
cover.innerHTML = ' <iframe width="100%" height="100%" frameborder="0" scrolling="no" style="z-index: -1; position: absolute; left: 0pt; top: 0pt;filter:alpha(opacity=0);"></iframe> ' ;
window.onscroll = function (){
if (cover.style.display == ' block ' ){
cover.style.left = document.documentElement.scrollLeft + document.documentElement.clientWidth - cover.offsetWidth + ' px ' ;
cover.style.top = document.documentElement.scrollTop + document.documentElement.clientHeight - cover.offsetHeight + ' px ' ;
}
}
}
}
d_log.prototype.open = function (){
this .cover.style.display = ' block ' ;
this .dialog.style.display = ' block ' ;
}
d_log.prototype.close = function (){
this .dialog.style.display = ' none ' ;
this .cover.style.display = ' none ' ;
}

function getEl(selecter){ // 简易选择器,可以选择id,css,tag标签
switch ( typeof selecter){
case ' string ' :
if ( / ^#([\w-]+)$ / .test(selecter)) // 匹配id选择器
return document.getElementById(selecter.replace( ' # ' , '' ));
else if ( / ^\.([\w-]+)$ / .test(selecter)){ // 匹配css选择器，返回数组集合
if (document.getElementsByClassName)
return document.getElementsByClassName(selecter.replace( ' . ' , '' ));
else { // 以下兼容ie5.5
var allEl = document.all ? document.all:document.documentElement.getElementsByTagName( " * " ),result = [];
for ( var i = 0 ,len = allEl.length;i < len;i ++ ){
if (( ' ' + allEl[i].className + ' ' ).indexOf( ' ' + selecter.replace( ' . ' , '' ) + ' ' ) !=- 1 )
result.push(allEl[i]);
}
return result;
}
} else if ( / ^([\w-]+)$ / .test(selecter)) // 匹配标签选择器
return document.getElementsByTagName(selecter).length == 0 ? null :document.getElementsByTagName(selecter);
else
return null ;
case ' object ' : // 对象直接返回
return selecter;
default : return null ;
}
}
function getStyle(el,styleName){ // 获取当前样式属性
if (el.currentStyle) // ie
return el.currentStyle[styleName];
else { // ff
var arr = el.ownerDocument.defaultView.getComputedStyle(el, null );
return arr[styleName];
}
}
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 };
}

这是页面调用方法

代码

<! 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 ; width : 400px ; 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 : 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 : #fff ; }
.pageDialog .concel { background-position : -45px 1px ; color : #000 ; display : none ; }
#oprate { margin : 20px 0 10px 0 ; text-align : center ; }
/* IE6 fixed */
* html { background : url(about:blank) fixed ; }
* html body { margin : 0 ; height : 100% ; }
* html #pageOverlay { position : absolute ; }
</ style >
< script type ="text/javascript" src ="style/js/j_dialog.js" ></ script >
</ head >

< body >
< ol id ="test" >
< li >< a href ="javascript:dlg1.open();" > 点击我试试 </ a ></ li >
< li >< a href ="javascript:dlg2.open();" > 点击我试试 </ a ></ li >
</ ol >
< select >< option > abcd </ option ></ select >
< div id ="owp" style ="height:200px;" > 这是第二个测试例子！ < a href ="javascript:dlg2.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 />
</ body >
</ html >
< script >
var dlg1 = d_log({con: ' <span>确定要删除此文件吗？</span> ' ,confirm: ' check ' }); // 自动生成的dialog
var dlg2 = d_log({wrap: ' #owp ' }); // 自定义的dialog
function check(){
alert( ' test! ' );
}
</ script >

转载于:https://www.cnblogs.com/foot3188/archive/2010/12/20/1911347.html