当前位置:Web前端 > javascript> 正文

JS让打开的窗口居中

时间:2013-12-10类别:Web前端

JS让打开的窗口居中

JS让打开的窗口居中

1、window.open打开窗口居中的方法

 

本例使用“(screen.width-width)/2”和“(screen.height-height)/2”获取窗体居中的坐标点,然后指定窗体的“left”和“top”属性。

  •  
  •  
  • HTML 代码   复制
  • 
    <html>
    
    <head>
    
    <title>标题页</title>
    
    <script language="javascript">
    
    //参数-url表示要打开的网站,winname表示打开后的窗体名称
    
    //参数windth表示打开窗体的宽度,height表示打开窗体的高度
    <!--
    function openwindow( url,winName,width,height) 
    
    {
    
        xposition=0; yposition=0;
    
        if ((parseInt(navigator.appVersion) >= 4 ))
    
        {
    
        xposition = (screen.width - width) / 2;                //窗体居中的x坐标
    
        yposition = (screen.height - height) / 2;             //窗体居中的y坐标
    
        }
    
        theproperty= "width=" + width + ","                     //打开窗口的属性
    
        + "height=" + height + "," 
    
        + "location=0," 
    
        + "menubar=0,"
    
        + "resizable=1,"
    
        + "scrollbars=0,"
    
        + "status=0," 
    
        + "titlebar=0,"
    
        + "toolbar=0,"
    
        + "hotkeys=0,"
    
        + "screenx=" + xposition + ","                       //仅适用于Netscape
    
        + "screeny=" + yposition + ","                       //仅适用于Netscape
    
        + "left=" + xposition + ","                      //IE
    
        + "top=" + yposition;                                //IE 
    
        window.open( url,winName,theproperty );                //打开窗口
    
    }//-->
    </script>
    
    </head>
    
    <body>
    
    <a href="javascript:openwindow('http://www.studyofnet.com','openwin',300,300)">
    
    打开窗口</a></body>
    
    </html>
    
    			
  •  

    2、js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

  •  
  •  
  • HTML 代码   复制
  • 
    <!doctype html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{margin:0;padding:0;}
            html{_background:url(about:blank);} /* 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */
            body{background:#fff; font: 12px/1.5 Tahoma,Geneva, \\5b8b\\4f53, sans-serif; height:100%;}
            .wrap{height:980px; padding-top:20px;text-align:center;}
            p{font-size:14px;text-align:center;line-height:24px;}
            /** 遮罩层 **/
            #masklayer{
                 background:#000;
                 display:none;
                 filter:alpha(opacity = 50);
                 opacity:0.5;
                 top:0; 
                 left:0;
                 height:100%;
                 width:100%;
                 z-index:999;
                 position:fixed;
                 _position:absolute;
                _left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); 
                _top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);
            }
            /** 弹出层 **/
            #popup{
                display:none;
                width:300px;
                z-index:1000;
                left:50%;
                top:50%;
                position:fixed!important;
                margin-left:-150px !important;
                _position:absolute;
                _top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat')?
                   documentElement.scrollTop + (document.documentElement.clientHeight - this.offsetHeight)/2: /*IE6*/
                document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);  /*IE5 IE5.5*/
            }
            .content{background:#f3f3f3;border:1px solid #999;}
            .content h3{background:#a0a0a0;color:#fff;font-size:14px;height:32px;line-height:32px; padding-left:5px;}
            #clickbtn{margin-top:20px;}
        </style>
    </head>
    <body>
        <li class="wrap">
            <p>
                我是正文我是正文我是正文我是正文我是正文我是正文我是正文
                <br />
                我是正文我是正文我是正文我是正文我是正文我是正文我是正文
                <br />
                我是正文我是正文我是正文我是正文我是正文我是正文我是正文
                <br />
    标签:
  • 上一篇下一篇

    猜您喜欢

    热门推荐