急用:网页设计:如何用JS实现:单击按钮就新打开一个的窗口,并设计该窗口的的长度和宽度

JavaScript024

急用:网页设计:如何用JS实现:单击按钮就新打开一个的窗口,并设计该窗口的的长度和宽度,第1张

<SCRIPT LANGUAGE="javascript">

<!--

window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no') //这句要写成一行

-->

</SCRIPT>

参数解释:

<SCRIPT LANGUAGE="javascript">js脚本开始;

window.open 弹出新窗口的命令;

'page.html' 弹出窗口的文件名;

'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替;

height=100 窗口高度;

width=400 窗口宽度;

top=0 窗口距离屏幕上方的象素值;

left=0 窗口距离屏幕左侧的象素值;

toolbar=no 是否显示工具栏,yes为显示;

menubar,scrollbars 表示菜单栏和滚动栏。

resizable=no 是否允许改变窗口大小,yes为允许;

location=no 是否显示地址栏,yes为允许;

status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;

</SCRIPT>js脚本结束

其实弹出层的思路还是比较简单的:

一般是这个层是隐藏的(display:none),然后点击你说的"图片(或者任何的页面元素)",这个层就会显示(一般display:inline-block/block),同时设置一个灰色的背景看起来这个层是浮于下面的层之上的。

下面是一段演示代码:

<!doctype html>

<html>

<head>

<meta charset="utf-8"><title>弹出层—到浏览器中央—背景变暗</title>

<style>

*{margin:0padding:0px}

body{padding:30px}

#show{width:300pxheight:200pxdisplay:nonepadding:1pxposition:absoluteborder:1px solid #4c77aabackground:#f2f7fdz-index:11zoom:1}

#show h3{background:#4c77aacolor:#ffffont-size:14pxpadding:5px}

#show span{position:absoluteright:3pxtop:3pxdisplay:blockcursor:pointercolor:#ffffont-weight:bold}

#show p{padding:5px}

#text{font-size:12pxtext-indent:2emline-height:20px}

#bgbox{position:absoluteleft:0top:0background:#000filter:alpha(opacity=30)opacity:0.3z-index:10}

</style>

<script type="text/javascript">

function show(){

var iWidth = document.documentElement.clientWidth

var iHeight = document.documentElement.clientHeight

var bgObj = document.createElement("div")

bgObj.setAttribute("id","bgbox")

bgObj.style.width = iWidth+"px"

bgObj.style.height =Math.max(document.body.clientHeight, iHeight)+"px"

document.body.appendChild(bgObj)

var oShow = document.getElementById('show')

oShow.style.display = 'block'

oShow.style.left = (iWidth-302)/2+"px"

oShow.style.top = (iHeight-202)/2+"px"

function oClose(){

oShow.style.display = 'none'

document.body.removeChild(bgObj)

}

var oClosebtn = document.createElement("span")

oClosebtn.innerHTML = "×"

oShow.appendChild(oClosebtn)

oClosebtn.onclick = oClose

bgObj.onclick = oClose

}

</script>

</head>

<body>

<a onclick="show() return false" href="#">请猛击我(我会弹到中间,同时背景变暗)</a>

<div id="show"><h3>弹出层标题栏</h3>

<p id="text">

这里是弹出层内容,内容可以是文字、图片等,可以是iframe传进来,也可以用jQuery的load()传进来。

</p>

</div>

</body>

</html>