导入javascript文件：
<script language="JavaScript" type="text/javascript" src="../scripts/showDialog.js"></script>
弹出另一个文件，用法：
onclick="showDialog.show('文件路径','宽度','高度','是否有滚动条yes/no');"
onclick="showDialog.show('ifram.html','580','212','no');"--没有滚动条
onclick="showDialog.show('ifram.html','580','212','yes');"--有滚动条
onclick="showDialog.show('ifram.html','580','212','no');"--没有滚动条
onclick="showDialog.show('ifram.html','580','212','yes');"--有滚动条
例如：
<a href="#" onclick="showDialog.show("ifram.html",'580','212','no');">弹出iframe</a>
或者：
<a href="ifram.html" onclick="showDialog.show(this.href,'580','212','no');return false;">弹出iframe</a>
关闭：在要弹出的文件里面
onclick = "window.parent.showDialog.hide();"
弹出本页的内容：
首页，要先隐藏需要弹出的内容，
style="display:none"
如：
<div id="pic" style="display:none" >.</div>
然后弹出：
onclick="showDialog.show('需要弹出内容的id');"
<input type="button" onclick="showDialog.show('pic');" value="本页弹出" />
<input type="button" onclick="showDialog.show('pic');" value="本页弹出" />
关闭用法：
onclick="showDialog.hide('pic');
html源文件：
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>SHOW DIALOG</title>
<script language="JavaScript" type="text/javascript" src="scripts/showDialog.js"></script>
<style type="text/css">
body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:30px;}
#wrap{display:block; position:relative;}
#wrap img{border:4px solid #dedede; padding:2px;}
a#close{ padding:0 5px;background:#fff;filter:Alpha(opacity=40); opacity:0.4; right:6px; top:6px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; color:#ccc; font-size:18px; text-align:center; position:absolute; text-decoration:none;}
a#close:hover{ color:#000;}
</style>
</head>
<body>
<div style="width:800px; margin:50px auto; padding-bottom:100px;"> 导入javascript文件：
<p> <code><script language="JavaScript" type="text/javascript" src="../scripts/showDialog.js"></script></code></p>
<p> 弹出另一个文件，用法：<code> onclick="showDialog.show('文件路径','宽度','高度','是否有滚动条yes/no');"</code><br />
<code>onclick="showDialog.show('ifram.html','580','212','no');"</code>--没有滚动条<br />
<code>onclick="showDialog.show('ifram.html','580','212','yes');"</code>--有滚动条</p>
<p> 例如： <code><a href="#" onclick="showDialog.show("ifram.html",'580','212','no');">弹出 iframe</a></code><br />
或者：<code><a href="ifram.html" onclick="showDialog.show(this.href,'580','212','no');return false;">弹出iframe</a></code> <br />
<a href="#" onclick="showDialog.show('ifram.html','512','342','no');">弹出iframe</a> </p>
<p>关闭：在要弹出的文件里面，<code>onclick = "window.parent.showDialog.hide();"</code></p>
<select name="select">
</select>
<p> 弹出本页的内容：<br />
首页，要先隐藏需要弹出的内容，<code>style="display:none"</code>。如：<br />
<code><div id="pic" style="display:none" >
.</div></code><br />然后弹出：<code>onclick="showDialog.show('需要弹出内容的id');"</code><br />
<code><input type="button" onclick="showDialog.show('pic');" value="本页弹出" /></code><br />
关闭用法：<code>onclick="showDialog.hide('pic');</code><br />
<a href="#" onclick="showDialog.show('pic');">本页弹出1</a><br />
<a href="#" onclick="showDialog.show('error');">本页弹出2</a>
<div id="error" style="display:none;">
<div style="width:300px; height:100px;border:4px solid #ccc; padding:10px;"> <a href="#error" title="点击关闭" onclick="showDialog.hide('error')" style="color:#f00;float:right;height:20px; line-height:20px; text-align:center;">关闭</a> 自定义内容，样式等等。
<select>
</select>
</div>
</div>
<div id="pic" style="display:none">
<div id="wrap"><a id="close" title="点击关闭" href="#pic" onclick="showDialog.hide('pic');">×</a><img src="http://hiphotos.baidu.com/ycsy520/pic/item/a650ffede974c85478f055b3.jpg" border="0" alt="这张图片在本页上" /></div>
</div>
</div>
</body>
</html>
ifram.html文件：
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出框提示方法</title>
<style>
body{ margin:0; padding:0;}
#wrap{display:block; position:relative; width:512px; height:342px;}
#wrap img{border:4px solid #dedede; padding:2px;}
a#close{ padding:5px 5px 0 5px;background:#fff;filter:Alpha(opacity=40); opacity:0.4; right:6px; top:6px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; color:#ccc; font-size:18px; text-align:center; position:absolute; text-decoration:none;}
a#close:hover{ color:#000;}
</style>
</head>
<body>
<div id="wrap"><a id="close" href="#" title="close" onclick = "window.parent.showDialog.hide();">×</a><img src="http://hiphotos.baidu.com/ycsy520/pic/item/a650ffede974c85478f055b3.jpg" border="0" alt="这张图片是在ifram.html文件里面"></div>
</body>
</html>
脚本源代码：（如要用自己压缩下。）
Code// version:0.2
// date:2008/11/5
// http://hi.baidu.com/ycsy520
var showDialog = function(){
var iframebg,overlay,wrap__,dialogId,xScroll,yScroll,iScrollTop,wWidth,wHeight;
return {
show:function(idOsrc,iWidth,iHeight,scrolling){
if(!document.createElement){return false;}
xScroll = showDialog.pageWidth();
yScroll = showDialog.pageHeight();
showDialog.showOverlay();
if(showDialog.isIE()){showDialog.createIfra();}
if((/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$/.test(idOsrc))){
var inserStr = "<iframe src='"+idOsrc+"' width = '"+iWidth+"' height = '"+iHeight+"' scrolling = '"+scrolling+"' frameborder = '0'></iframe>";
wrap__ = document.createElement('div');
wrap__.setAttribute('id','wrap__');
overlay.parentNode.insertBefore(wrap__,overlay);
wrap__.innerHTML = inserStr;
wrap__.style.width = iWidth+"px";
wrap__.style.height = iHeight +"px";
showDialog.posWindow(wrap__);
}else if(id__(idOsrc)){
dialogId = id__(idOsrc);
dialogId.style.display="block";
showDialog.posWindow(dialogId);
}else{return false;}
},
showOverlay:function(){
var body = document.body;
showDialog.setStyle(body,{
padding:'0px',
margin:'0px',
overflowX:'hidden'
});
overlay = document.createElement('div');
overlay.setAttribute('id','overlay__');
wWidth = showDialog.windowWidth();
wHeight = showDialog.windowHeight();
showDialog.setStyle(overlay,{
width : (xScroll>wWidth ? xScroll : wWidth)+ 'px',
height : (yScroll>wHeight ? yScroll : wHeight)+ 'px',
backgroundColor:'#000000',
position:'absolute',
top:'0px',
left:'0px',
zIndex:'998'
});
showDialog.setOpacity(overlay,70);
return body.appendChild(overlay);
},
setOpacity:function(ele,level){
if(showDialog.isIE()){
ele.style.filter = 'Alpha(opacity=' + level + ')';
}else{
ele.style.opacity = level/100;
}
},
createIfra:function(){
if(!document.createElement("iframe")){return false;};
try{
var iframebg = document.createElement("iframe");
iframebg.setAttribute("id","ifrbg__");
iframebg.setAttribute("src","javascript:void(0);");
iframebg.setAttribute("scrolling","no");
iframebg.setAttribute("frameborder","0");
iframebg.setAttribute("allowtransparency","true");
showDialog.insertAfter(iframebg,overlay);
showDialog.setStyle(iframebg,{
height : overlay.style.height,
width : overlay.style.width,
backgroundColor:'#FFFFFF',
filter:'Alpha(opacity=0)',
zIndex:'997',
top:'0px',
left:'0px',
position:'absolute'
});
iframebg.style.backgroundColor="transparency";
}catch(e){}
},
hide:function(obj){
try{
var body = document.body;
body.style.overflowX = 'auto';
if(id__(obj)){id__(obj).style.display='none';}
if(overlay){body.removeChild(overlay)}
if(showDialog.isIE() && id__('ifrbg__')){body.removeChild(id__('ifrbg__'));iframebg=null}
if(wrap__){body.removeChild(wrap__);}
overlay = null;wrap__=null;dialogId= null;xScroll=null;yScroll=null;iScrollTop=null;wWidth=null;wHeight=null;
}catch(e){}
},
setStyle:function(ele,styles){
for(var i in styles){
ele.style[i] = styles[i];
}
},
adjust:function(){
wHeight = showDialog.windowHeight();
xScroll = showDialog.pageWidth();
yScroll = showDialog.pageHeight();
overlay = id__('overlay__');
iframebg = id__('ifrbg__');
overlay.style.height =(yScroll>wHeight ? yScroll : wHeight)+ 'px';
overlay.style.width =xScroll +'px';
if(dialogId){showDialog.posWindow(dialogId);}
if(wrap__){showDialog.posWindow(wrap__);}
if(iframebg){
iframebg.style.height = overlay.style.height;
iframebg.style.width = overlay.style.width;
}
},
posWindow:function(obj){
var __obj = id__(obj) || obj;
try{
iScrollTop = document.body.scrollTop||document.documentElement.scrollTop;
wWidth = showDialog.windowWidth(),wHeight = showDialog.windowHeight();
if(showDialog.isIE()){
yScroll = showDialog.pageHeight();
}
__obj.style.position="absolute";
__obj.style.zIndex = "999";
__obj.style.backgroundColor="#FFFFFF";
__obj.style.marginLeft = "-" + __obj.clientWidth/2 + "px";
__obj.style.marginTop = "-" + __obj.clientHeight/2 + "px";
__obj.style.left = wWidth/2 +"px";
__obj.style.top = wHeight/2 + iScrollTop + "px";
__obj = null;
}catch(e){};
},
pageHeight:function(){
if (window.innerHeight && window.scrollMaxY) {yScroll = window.innerHeight + window.scrollMaxY;} else if (document.body.scrollHeight > document.body.offsetHeight){yScroll = document.body.scrollHeight;} else {yScroll = document.body.offsetHeight;}
return yScroll;
},
pageWidth:function(){
if (window.innerWidth && window.scrollMaxX) {xScroll = window.innerWidth + window.scrollMaxX;} else if (document.body.scrollWidth > document.body.offsetWidth){xScroll = document.body.scrollWidth;} else {xScroll = document.body.offsetWidth;}
return xScroll;
},
windowHeight:function(){
return (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
},
windowWidth:function(){
return (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;
},
isIE:function(){
var sUserAgent = navigator.userAgent;
return sUserAgent.indexOf("compatible")>-1 && sUserAgent.indexOf("MSIE")>-1 && !(sUserAgent.indexOf("Opera")>-1);
},
insertAfter:function(nele,tele) {
var p = tele.parentNode;
if (p.lastChild == tele) {
p.appendChild(nele);
}else {
p.insertBefore(nele,tele.nextSibling);
}
}
};
}();
function id__(obj){return document.getElementById(obj);}
//window.onresize = window.onscroll = function(){setTimeout(function(){if(id__('overlay__')){try{showDialog.adjust();}catch(e){};}},100);}
(function(){setInterval(function(){if(id__('overlay__')){try{showDialog.adjust();}catch(e){};}},10);})();
浙公网安备 33010602011771号