js 弹出,js弹出新窗口,超详细的JS弹出窗口代码大全

js 弹出,js弹出新窗口,超详细的JS弹出窗口代码大全

本文主要为大家分享超详细的JS弹出窗口代码。本文中的示例代码非常详细,具有一定的参考价值。感兴趣的朋友可以参考一下。

我想大多数人都知道如何使用网页弹出各种窗口,但如何制作各种弹出窗口,我们今天就来学习一下:

1.弹启一个全屏窗口

代码如下:

超文本标记语言

Body //www.jb51.net ,我们,全屏);;

bwww.jb51.net/b

/body

/html

2.弹启一个被F11化后的窗口

代码如下:

超文本标记语言

Body //www.jb51.net , we , channel mode );

bwww.jb51.net/b

/body

/html

3.弹启一个带有收藏链接工具栏的窗口

代码如下:

超文本标记语言

Www.wangye8.com ,我们,宽度=400,高度=300,董事);

bwww.wangye8.com/b

/body

/html

4.网页对话框

代码如下:

超文本标记语言

脚本语言=javascript

!-

模态对话框(//www.jb51.net,我们, Dialog width:400 px;dialog height:300 px;

dialog left:200 px;dialog top:150 px;中心:有;求助:可以;可调整大小:是;状态:是’)

//-

/脚本

bwww.wangye8.com/b

/body

/html

超文本标记语言

脚本语言=javascript

!-

ShowEssDialog (//www.jb51.net,我们, dialog width:400 px;dialog height:300 px;

dialog left:200 px;dialog top:150 px;中心:有;求助:可以;可调整大小:是;状态:是’)

//-

/脚本

bhttp://www.wangye8.com/b

/body

/html

ShowModalDialog()或showModelessDialog()用于调用网页对话框。至于showModalDialog()和showModelessDialog()的区别,showModalDialog()打开的窗口(简称模式窗口)放在父窗口上,必须关闭才能访问父窗口(建议尽量少用,以免冒犯);showModelessDialog()

设置对话框窗口的高度。

设置对话框窗口的宽度。

设置对话框窗口相对于桌面左上角的左边位置。

设置对话框窗口相对于桌面左上角的顶部位置。

居中:{是|否| 1 | 0}指定是否将对话框在桌面上居中。默认值为“是”。

Help: {yes | no | 1 | 0}指定是否在对话框窗口中显示区分上下文的帮助图标。默认值为“是”。

可调整大小:{yes | no | 1 | 0}指定是否可以更改对话框窗口的大小。默认值为“否”。

Status: {yes | no | 1 | 0}指定对话框窗口是否显示状态栏。对于非模态对话框窗口,默认值为“yes”;对于模态对话框窗口,默认值为“否”。

5、其他弹出窗口代码

经常上网的朋友可能都去过这样的网站。他们一进入主页,就会弹出一个窗口,或者按一个链接或按钮就会弹出。通常是一些通知,版权信息,警告,欢迎访问等。或者作者想要特殊提示的信息将显示在该窗口中。其实制作这样的页面非常容易,只需要在页面的HTML中添加几个java脚本代码就可以了。下面我带你分析一下它的玄机。

【最基本的弹出窗口代码】

实际上,代码非常简单:

代码如下:

脚本语言=java script

!-

window.open (page.html )

-

/脚本

因为这是一段java脚本代码,所以它们应该放在SCRIPT LANGUAGE=java script 标记和/script之间。-和-适用于一些较低版本的浏览器。在这些较旧的浏览器中,如果不支持java脚本,标签中的代码将不会显示为文本。

Window.open (page.html )用于控制新窗口page.html的弹出。如果page.html与主窗口不在同一个路径中,那么路径应该写在它的前面。绝对路径(3358)和相对路径(./)都可以。

可以用单引号和双引号,但不要混用。

这段代码可以添加到HTML中的任何地方,或者添加到head和/head之间。位置越早,执行得越早,尤其是页面代码很长的时候。如果想让页面早一点弹出,尽量往前放。

【经过设置后的弹出窗口】

先说一下弹窗外观的设置。在上面的代码中添加一些东西就可以了。

让我们自定义这个弹出窗口的外观、大小和弹出位置,以适合这个页面的具体情况。

代码如下:

脚本语言=java脚本:

!-

window.open (page.html , newwindow , height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,

位置=否,状态=否’)

//写成一行

-

/脚本

参数解释:

脚本语言=java script js脚本开始;

Window.open命令弹出一个新窗口;

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

newwindow弹出窗口的名称(不是文件名)可以替换为empty ";

高度=100窗高;

Top=0窗口距屏幕顶部的像素值;

Left=0距离屏幕左侧的窗口的像素值;

Toolbar=否是否显示工具栏,是显示;

Menubar,scrollbars的意思是菜单栏和滚动条;

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

Location=no是否显示地址栏,是允许;

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

/SCRIPT js脚本结束。

【用函数控制弹出窗口】

以下是完整的代码。

代码如下:

超文本标记语言

脚本语言=java script

!-

函数openwin(){

window.open(page.html , newwindow , height=100,width=400,toolbar=no,menubar=no,scrollbars=no,resizable=no,

位置=否,状态=否;)

//写成一行

}

-

/脚本

/头

身体

.任何页面内容。

/body

/html

这里定义了一个函数openwin(),其内容是打开一个窗口。在被调用之前,它没有任何用处。怎么称呼?

方法一:

阅读页面时弹出正文浏览器;

方法二:

正文浏览器离开页面时的弹出窗口;

方法三:

通过连接调用:a href=# 打开一个窗口/a

注意:使用的 # 是一个虚拟连接。

方法四:

用按钮调用:输入类型=按钮值=打开窗口

【主窗口打开文件1.htm,同时弹出小窗口page.html】

将以下代码添加到主窗口的标题区域:

代码如下:

脚本语言=java script

!-

函数openwin(){

window.open(page.html ,, width=200,height=200 );)

}

//-

/脚本

添加到正文区域:a href= 1.htm open/a。

【弹出的窗口之定时关闭控制】

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

首先,将以下代码添加到page.html文件的头区域:

代码如下:

脚本语言=java script

函数closeit() {

SetTimeout (self.close(),10000)//毫秒

}

/脚本

然后,用body一词替换page.html中原来的BODY一句。别忘了写这句话!这句话的作用是调用代码关闭窗口,10秒后再自行关闭窗口。)

【在弹出窗口中加上一个关闭按钮】

代码如下:

形式

Type= button value= off

/表单

呵呵,现在更完美了。

【内包含的弹出窗口——一个页面两个窗口】

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

有了下面这个例子,你就可以在一个页面中完成上面的效果。

代码如下:

超文本标记语言

脚本语言=java script

函数openwin()

{

OpenWindow=window.open(, newwin , height=250,width=250,toolbar=no,scrollbars= scroll ,menubar=no ););

//写成一行

打开window.document.write(标题示例/标题);)

open window . document . write( BODY BGCOLOR=# FFFFFF );)

open window . document . write( h1 hello!/h1’;)

OpenWindow.document.write(新窗口已打开!;)

open window . document . write(/BODY );)

open window . document . write(/HTML )。)

OpenWindow.document.close()

}

/脚本

/头

身体

A href=# 打开一个窗口/a

Type= button value=打开窗口

/body

/html

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

【终极应用——弹出窗口的Cookie控制】

回想一下,上面的弹窗虽然很酷,但是有一点小瑕疵(你沉浸在喜悦中,肯定没注意到吧?)比如你把上面的脚本放在一个需要经常访问的页面上(比如首页),那么你每刷新一次这个页面,窗口就会弹出一次。是不是很烦?有解决办法吗?是啊!跟我来.我们可以用Cookie来控制它。

首先,将以下代码添加到主页HTML的头部区域:

代码如下:

脚本

函数openpopup(){

Window.open (hello.htm ,, width=300,height=300 )//自己修改弹出窗口

}

函数get_cookie(Name) {

var search=Name =

var return value=“”;

if (documents.cookie.length 0) {

offset=documents . cookie . index of(search)

如果(offset!=-1) { //如果cookie存在

偏移量=搜索长度

//设置值开头的索引

end=documents . cookie . index of(;),偏移);

//设置cookie值结尾的索引

if (end==-1)

end=documents . cookie . length;

return value=unescape(documents . cookie . substring(offset,end))

}

}

返回returnvalue

}

函数loadpopup(){

if (get_cookie(popped)==){

openpopup()

documents.cookie=popped=yes

}

}

/脚本

在正文区域键入以下代码:

正文//离开页面时弹出

或者:

正文//进入页面时弹出

你可以尝试刷新这个页面或者重新进入,窗口就再也不会弹出来了。真正的流行只有一次

至此,弹窗的制作和应用技巧基本完成。希望对正在做网页的朋友有所帮助,会很欣慰。

应该注意的是,JS脚本中的大小写应该是一致的。

没有菜单、工具栏、地址栏的弹出窗口:

代码如下:

脚本语言=java script

!-

var gt=unescape( > );

var popup=null

var over=启动弹出导航器;

popup=window.open(, popupnav , width=500,height=500,resizable=0,scroll bars=auto );//width=500,height=500是窗口的长和宽。

如果(弹出!=null) {

if (popup.opener==null) {

popup.opener=self}

Popup.location.href=要打开的文件名;

}

//-

/脚本

方法二:Cookies应用:控制弹出窗口。当我们在页面中设置弹窗时,每次再次浏览页面时,弹窗都会自动弹出,造成不必要的麻烦。那么如何解决这个问题呢?这里我用一个简单的例子来说明如何通过操作Cookies让弹窗只在第一次浏览页面时弹出,以后就不会很烦了!

复制代码如下:脚本函数open pop window(){ window . open( hello . htm ,, width=200,height=200 //自己修改弹出窗口}函数get _ cookie(name){ var search=name =;var return value=“”;if(documents . cookie . length 0){ offset=documents . cookie . index of(search);如果(offset!=-1) {//如果offset=search.length之前有cookies记录;//设置cookie end=documents . cookie . index of的起始位置(;,偏移);//设置cookie的结束位置if(end==-1)end=documents . cookie . length;return value=unescape(documents . cookie . substring(offset,end))} } return return value;}函数load popup(){ if(get _ cookie( popped )== ){ openpopwindow();documents.cookie= popped=yes} }/脚本

在BODY区域输入上面的代码:离开页面会弹出body //。

或者:body //打开页面时弹出离开页面时弹出效果:

效果:当别人关闭这个页面时,会弹出一个窗口,你可以写一些祝福的话。

核心代码:

代码如下:

脚本语言=javascript

!- Begin函数leave(){

窗口.打开

( 1.htm ,, toolbar=no,menubar=no,location=no,height=225,width=235));

破裂

}

//结束-

/脚本

这就是本文的全部内容。希望对大家的学习有帮助,支持我们。

js 弹出,js弹出新窗口,超详细的JS弹出窗口代码大全