对全屏弹出div提示框通用javascript-CSDN博客

< script language ="JavaScript" type ="text/javascript" src ="../scripts/showDialog.js" ></ script >

οnclick="showDialog.show('文件路径','宽度','高度','是否有滚动条yes/no');"
οnclick="showDialog.show('ifram.html','580','212','no');"--没有滚动条
οnclick="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 >

οnclick="showDialog.show('需要弹出内容的id');"
< input type ="button" onclick ="showDialog.show('pic');" value ="本页弹出" />

οnclick="showDialog.hide('pic');

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> οnclick="showDialog.show('文件路径','宽度','高度','是否有滚动条yes/no');"</code><br />
    <code>οnclick="showDialog.show('ifram.html','580','212','no');"</code>--没有滚动条<br />
    <code>οnclick="showDialog.show('ifram.html','580','212','yes');"</code>--有滚动条</p>
<p> 例如： <code><a href="#" οnclick="showDialog.show("ifram.html",'580','212','no');">弹出 iframe</a></code><br />
    或者：<code><a href="ifram.html" οnclick="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>οnclick="showDialog.show('需要弹出内容的id');"</code><br />
    <code><input type="button" οnclick="showDialog.show('pic');" value="本页弹出" /></code><br />
    关闭用法：<code>οnclick="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>

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);})();