javascript弹出窗口代码

其实制作这样的页面非常容易，只需要在页面的HTML中添加几段Javascript代码就可以了。下面我带你分析一下它的奥秘。

[1、最基本的弹出窗口代码]

其实代码很简单:

lt；脚本语言= " javascript " gt

lt；！-

window . open(' page . html ')

- gt；

lt；/SCRIPT gt；

因为这是一段javascripts代码，所以应该把它们放在:它适用于一些较低版本的浏览器，在这些浏览器中，标签中的代码不会显示为文本。来养成这个好习惯？

window.open ('page.html ')用于控制新窗口page.html的弹出。如果page.html与主窗口不在同一个路径中，那么路径应该写在它的前面。绝对路径(http://)或相对路径(../)是可以接受的。

可以用单引号和双引号，不要混用就好。

这段代码可以添加到HTML中的任何地方，< head gt和

[2。设置后弹出窗口]

先说弹窗的设置。在上面的代码中添加一些东西就可以了。让我们自定义这个弹出窗口的外观、大小和弹出位置，以适合这个页面的具体情况。

lt；脚本语言= " javascript " gt

lt；！-

window.open ('page.html '，' newwindow '，' height=100，width=400，top=0，left=0，toolbar=no，menubar=no，scrollbars=no，resizable=no，location=no，status=no')

//写成一行

- gt；

lt；/SCRIPT gt；

参数说明:

lt；脚本语言= " javascript " gtJs脚本启动；

window.open命令弹出一个新窗口；

弹出窗口“page.html”的文件名；

' new window '弹出窗口的名称(不是文件名)，可选，可以替换为空' '；

height=100窗口高度；

width=400窗宽；

top=0窗口距屏幕顶部的像素值；

left=0窗口距屏幕左侧的像素值；

toolbar=no是否显示工具栏，yes显示；

menubar，scrollbars是指菜单栏和滚动条。

resizable=no是否允许改变窗口大小，yes是允许的；

location=no是否显示地址栏，yes允许；

status=no是否显示状态栏中的信息(通常文件已经打开)，yes是允许的；

lt；/SCRIPT gt；js脚本结束

[3。使用函数控制弹出窗口]

这里是完整的代码。

lt；html gt

lt；head gt

lt；脚本语言= " JavaScript " gt

lt；！-

函数openwin() {

window.open ("page.html "，" newwindow "，" height=100，width=400，toolbar=no，menubar=no，scrollbars=no，resizable=no，location=no，status=no")

//写成一行

}

//- gt；

lt；/script gt；

lt；/head gt；

lt；body onload = " open win()" gt；

...任意页面内容...

lt；/body gt；

lt；/html gt；

这里定义了一个函数openwin()。该功能的内容是打开一个窗口。在被调用之前，它没有任何用处。

怎么叫？

方法1:< body onload = " open win()" gt；浏览器读取页面时弹出窗口；

方法2:< body onunload = " open win()" gt；浏览器离开页面时弹出窗口；

方法三:用连接调用:

lt；a href = " # " onclick = " open win()" gt；打开窗户

注意:使用的“#”是虚拟连接。

方法四:用按钮调用:

lt；type = " button " onclick = " open win()" value = " open window " >:

[4。两个窗口同时弹出]

对源代码稍作改动:

lt；脚本语言= " JavaScript " gt

lt；！-

函数openwin() {

window.open ("page.html "，" newwindow "，" height=100，width=100，top=0，left=0，toolbar=no，menubar=no，scrollbars=no，resizable=no，location=no，status=no")

//写成一行

window.open ("page2.html "，" newwindow2 "，" height=100，width=100，top=100，left=100，toolbar=no，menubar=no，scrollbars=no，resizable=no，location=no，status=no")

//写成一行

}

//- gt；

lt；/script gt；

为了避免两个弹出窗口重叠，请使用top和left来控制弹出窗口的位置，使它们不会相互重叠。最后用上面说的四种方法调用。

注意:两个窗口(newwindows和newwindow2)的名称不能相同，或者都应该是空。好吗？

[5。主窗口打开文件1.htm，同时弹出小窗口page.html]

将以下代码添加到主窗口中

lt；脚本语言= " javascript " gt

lt；！-

函数openwin() {

window.open("page.html "，" width=200，height=200")

}

//- gt；

lt；/script gt；

加入< body >地区:

lt；a href = " 1 . htm " onclick = " open win()" gt；打开 lt/a gt；去做吧。

[6。弹出窗口定时关闭控制]

接下来我们来控制弹出窗口，效果会更好。如果我们向弹出页面添加一小段代码(注意，它是添加到page.html的HTML中，而不是主页中，否则...)，让它10秒后自动关闭不是更酷吗？

首先，将下面的代码添加到< head gt地区:

lt；脚本语言= " JavaScript " gt

function closeit() {

SetTimeout ("self.close()"，10000)//ms

}

lt；/script gt；

然后，使用< body onload = " close it()" gt；这句话取代了page.html的原文

[7。在弹出窗口中添加关闭按钮]

lt；表单 gt

lt；type = ' button ' value = ' close ' onclick = ' window . close()' >:

lt；/FORM gt；

呵呵，现在更完美了！

[8。包含在带有两个窗口的一页中的弹出窗口]

上面的例子都包含两个窗口，一个是主窗口，一个是小弹出窗口。

通过下面的例子，你可以在一个页面中完成上述效果。

lt；html gt

lt；head gt

lt；脚本语言= " JavaScript " gt

函数openwin()

{

OpenWindow=window.open("，" newwin "，" height=250，width=250，toolbar=no，scrollbars="+scroll+"，menubar = no ")；

//写成一行

open window . document . write(" lt；TITLE gt例子

open window . document . write(" lt；BODY BGCOLOR = # ffffff gt)

open window . document . write(" lt；h1 gt你好！ lt/h1 >；")

OpenWindow.document.write("新窗口打开了！")

open window . document . write(" lt；/BODY >)

open window . document . write(" lt；/HTML >)

open window . document . close()

}

lt；/SCRIPT gt；

lt；/head gt；

lt；body gt

lt；a href = " # " onclick = " open win()" gt；打开窗户

lt；type = " button " onclick = " open win()" value = " open window " >:

lt；/body gt；

lt；/html gt；

看看OpenWindow.document.write()里的代码。不是标准的HTML吗？按照格式多写几行就行了。注意多一个标签或者少一个标签都会出错。记得以OpenWindow.document.close()结尾？

[9、弹出窗口的终极应用——Cookie控制]

回想一下，上面的弹窗虽然很酷，但是有一点小缺陷(沉浸在喜悦中的你一定没发现吧？)比如你把上面的脚本放在一个需要经常访问的页面上(比如首页)，那么你每刷新一次这个页面，窗口就会弹出一次。是不是很烦？:-(

有解决办法吗？是啊！；-)跟我来。

我们可以用cookie来控制。

首先，将下面的代码添加到< HEAD gt地区:

lt；脚本 gt

函数openwin(){

window.open("page.html "，" width=200，height=200")

}

函数get_cookie(Name) {

var search = Name + "="

var return value = " "；

if(document . cookie . length gt；0) {

offset = document . cookie . index of(search)

if (offset！= -1) {

offset+= search . length

end = document . cookie . index of("；"，偏移)；

if (end == -1)

end = document . cookie . length；

return value = unescape(document . cookie . substring(offset，end))

}

}

return返回值；

}

函数loadpopup(){

if(get _ cookie(' popped ')= = ' '){

openwin()

document . cookie = " popped = yes "

}

}

lt；/script gt；

然后，使用< body onload = " load popup()" gt；(注意不是openwin而是loadpop！)替换原来的

需要注意的是，JS脚本中的大小写要一致。