JS让打开的窗口居中

更多时间：2013-12-10 类别：Web前端浏览量：1688

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 />

  标签：javascript 窗口居中

上一篇：面试时的着装打扮

下一篇：DataTable的增删改查操作

您可能感兴趣

JS让打开的窗口居中

JS让打开的窗口居中

热门推荐

排行榜