如何让JS弹出的窗口居中

JavaScript017

如何让JS弹出的窗口居中,第1张

<script type="text/javascript">

function openwindow(url,name,iWidth,iHeight)

{

var url//转向网页的地址

var name//网页名称，可为空

var iWidth//弹出窗口的宽度

var iHeight//弹出窗口的高度

//window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽

var iTop = (window.screen.height-30-iHeight)/2//获得窗口的垂直位置

var iLeft = (window.screen.width-10-iWidth)/2//获得窗口的水平位置

window.open(url,name,'height='+iHeight+',,innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no')

}

</script>

不用js，css也可以。

// 大屏幕，当屏幕宽度等于641px或者大于641px的时候

@media screen and (max-width: 641px) {

    .container { width: 640px margin: 0 auto }

}

// 小屏幕，当屏幕最大宽度600px或者小于600px的时候

@media screen and (max-width: 640px) {

    .container { width: auto margin: 0 }

}

js的话，判断一下window.innerWidth

var ww = window.innerWidth

if (ww < 640) {

    document.documentElement.setAttribute('class', 'container-mobile')

} else {

    document.documentElement.setAttribute('class', 'container')

} .container { width: 640px margin: 0 auto }

.container-mobile { width: auto margin: 0 }

1、准备好一个空的html结构的文档。

2、接下来要准备的是准备一个div用来放内容了，这里为了显示特意给div设置了边框。

3、接下来就在div中添加内容，如下图所示，运行后会发现内容偏向于左上角。

4、给div设置水平居中，如下图所示，并且设置行高为div的高度，会发现它水平垂直居中了。

5、让其display属性为table-cell，知道table单元格中可以通过vertical-align垂直居中，转化后也可以用此属性。

6、运用display转化后会发现margin的auto属性不起作用了。