• 2009-11-30

    div灰屏居中弹窗(兼容ie&ff&op) - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/52595554.html

    写了一个div灰屏居中弹窗,代码存档。

    <div id=full style="position:absolute;display:none;background:gray;z-index:10000;filter:alpha(opacity=30);opacity:0.3;"></div>
    <div id=picdiv style="z-index:20000;display:none;position:absolute;width:665px;height:526px;border:1px solid black;text-align:right;background-color:#FFCC00;"><div style="background-color:#FFCC00;overflow:hidden;padding:5px 20px 5px 20px"><span style="float:left;font-weight:bold">图片</span><a href="javascript:void(0)" onClick="enwindow()">关闭</a></div>
    <img src="a.jpg" oncontextmenu="return false" width=665px height="526px" galleryImg="no" />
    </div>
    <div id=op style="z-index:30000;display:none;position:absolute;width:665px;height:497px;"></div>
    <script>
    pageobj=(document.documentElement.clientHeight < document.body.clientHeight) ? document.body : document.documentElement;
    var Browser = {
    'isIE' : (navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0),
    'isFirefox' : navigator.userAgent.indexOf('Firefox') >= 0,
    'isOpera' : navigator.userAgent.indexOf('Opera') >= 0
    };
    function mydrag()
    {
    return false;
    }
    function myresize()
    {
    w=pageobj.clientWidth;
    h=pageobj.clientHeight;
    l=pageobj.scrollLeft;
    t=pageobj.scrollTop;
    document.getElementById("picdiv").style.left=(w-document.getElementById("picdiv").clientWidth)/2+l+"px";
    document.getElementById("picdiv").style.top=(h-document.getElementById("picdiv").clientHeight)/2+t+"px";
    if(Browser.isOpera)
    {
    document.getElementById("op").style.left=(w-document.getElementById("picdiv").clientWidth)/2+l+"px";
    document.getElementById("op").style.top=(h-document.getElementById("picdiv").clientHeight)/2+t+29+"px";
    }
    w=Math.max(pageobj.scrollWidth,pageobj.clientWidth)
    w=Math.max(w,pageobj.offsetWidth);
    h=Math.max(pageobj.scrollHeight,pageobj.clientHeight)
    h=Math.max(h,pageobj.offsetHeight);
    document.getElementById("full").style.width=w+"px";
    document.getElementById("full").style.height=h+"px";
    }
    function diswindow()
    {
    if(Browser.isIE)
    for(i=0;i<document.getElementsByTagName("select").length;i++)
    {
    document.getElementsByTagName("select")[i].options[document.getElementsByTagName("select")[i].selectedIndex].style.backgroundColor="#ccc";
    document.getElementsByTagName("select")[i].disabled=true;
    }
    pageobj.style.overflow = "hidden";
    pageobj.onmousemove=mydrag;
    window.onresize=myresize;
    window.onscroll=myresize;
    }
    function enwindow()
    {
    if(Browser.isIE)
    for(i=0;i<document.getElementsByTagName("select").length;i++)
    {
    document.getElementsByTagName("select")[i].options[document.getElementsByTagName("select")[i].selectedIndex].style.backgroundColor="";
    document.getElementsByTagName("select")[i].disabled=false;
    }
    document.getElementById("full").style.display="none";
    document.getElementById("picdiv").style.display="none";
    if(Browser.isOpera)
    document.getElementById("op").style.display="none";
    pageobj.style.overflow = "auto";
    pageobj.onmousemove=null;
    window.onresize=null;
    }
    function showpic()
    {
    diswindow();
    document.getElementById("picdiv").style.display="block";
    w=pageobj.clientWidth;
    h=pageobj.clientHeight;
    l=pageobj.scrollLeft;
    t=pageobj.scrollTop;
    document.getElementById("picdiv").style.left=(w-document.getElementById("picdiv").clientWidth)/2+l+"px";
    document.getElementById("picdiv").style.top=(h-document.getElementById("picdiv").clientHeight)/2+t+"px";
    if(Browser.isOpera)
    {
    document.getElementById("op").style.display="block";
    document.getElementById("op").style.left=(w-document.getElementById("picdiv").clientWidth)/2+l+"px";
    document.getElementById("op").style.top=(h-document.getElementById("picdiv").clientHeight)/2+t+29+"px";
    }
    w=Math.max(pageobj.scrollWidth,pageobj.clientWidth)
    w=Math.max(w,pageobj.offsetWidth);
    h=Math.max(pageobj.scrollHeight,pageobj.clientHeight)
    h=Math.max(h,pageobj.offsetHeight);
    document.getElementById("full").style.width=w+"px";
    document.getElementById("full").style.height=h+"px";
    document.getElementById("full").style.left=0;
    document.getElementById("full").style.top=0;
    document.getElementById("full").style.display="block";
    }
    </script>
    <input type=button value=popup onclick=showpic() />
    <p>
    ballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballackballack</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p><p>ball</p>

    分享到:

    历史上的今天:

    武汉动物园 2008-11-30
    web2.0到web3.0 2007-11-30