基于JavaScript实现图片点击弹出窗口而不是保存
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了基于JavaScript实现图片点击弹出窗口而不是保存的相关资料,需要的朋友可以参考下
一直想给安装一个缩略图点击弹出的插件，但是找了找几乎都是用的php来做的，插件的使用和安装极其繁琐，于是上网查了些demo，自己实现了一个纯js的图片弹出插件。
实现的思路是通过编写hook图片的onclick事件的函数，在函数中对body追加div元素，再将传入的图片对象放入元素中，同时再监听div的onclilck事件，当捕捉到点击，再关闭(其实是隐藏)弹出的div。
通过在函数初始化的时候收集页面所有的img元素，再为每个img元素增加onclick="picHook(this)"这条属性，这样当图片在被点击时，这个函数就能自动创建div蒙板背景，并获取被点击图片的宽度和高度，同时生成一个新的和图片一样大小的div来显示图片。当蒙板再次被点击时，hook事件再次响应，并将蒙板和图片div的style置为none，弹出的图片就被关闭了。
说起来很简单，做起来就更简单了，简单到只需要一个函数即可实现。
talking is cheap，show you my code:
function picHook(pic){
/*图片对象*/
var imgs = document.getElementsByTagName("img");
/*前景div*/
var light = document.getElementById('light') || document.createElement("div");
/*背景div*/
var bg = document.getElementById('bg') || document.createElement("div");
/*图片放大*/
var s_pic = document.getElementById('s_pic') || document.createElement("img");
/*css对象*/
var css = document.createElement("style");
/*css样式*/
var csstext = '\
position:\
margin:0 \
left: 0%;\
width: 100%;\
padding-bottom: 1000%;\
background-color:\
z-index:1001;\
opacity:.80;\
filter: alpha(opacity=80);\
overflow:\
.pic_div {\
margin-bottom:\
position:\
left:50%;\
margin-left:-250\
margin-top:-100\
z-index:1002;\
/*收集页面所有图片对象*/
for(i=0; i&imgs.i++){
imgs[i].setAttribute("onclick", "picHook(this)" );
css.type = "text/css";
/*关闭图像*/
if( !pic ){
bg.style.display = light.style.display = "none";
/*ie兼容*/
if(css.styleSheet){
css.styleSheet.cssText =
css.appendChild(document.createTextNode(csstext));
s_pic.setAttribute("id", "s_pic");
s_pic.setAttribute("src", pic.src);
light.setAttribute("id", "light");
light.setAttribute("class", "pic_div");
light.style.display = 'block';
light.appendChild(s_pic);
bg.setAttribute("id", "bg");
bg.setAttribute("class", "pic_bg");
bg.setAttribute("onclick", "picHook()");
bg.style.display = light.style.
document.getElementsByTagName("head")[0].appendChild(css);
document.body.appendChild(bg);
document.body.appendChild(light);
将这段代码保存在页面的head中，再将body的onload事件绑定到picHook()函数，你的页面中就也可以实现图片点击弹出大图啦。
还存在一点小bug，主要是因为我不太熟悉css，导致div的样式做的有点难看。
css的样式我是直接声明在js里的，这样就不用再另外创建css文件了。
等过了这个节再琢磨琢磨css，优化下样式。希望本文给大家分享的JavaScript实现图片点击弹出窗口而不是保存的相关知识能够帮助到大家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具JavaScript弹出对话框的三种方式
字体：[ ] 类型：转载 时间：
本文主要介绍了javascript中的三种弹出对话框，分别是alert()方法，confirm()方法，prompt()方法，对javascript弹出对话框相关知识感兴趣的朋友一起学习吧
学习过js的小伙伴会发现，我们在一些实例中用到了alert()方法、prompt()方法、prompt()方法，他们都是在屏幕上弹出一个对话框，并且在上面显示括号内的内容，使用这种方法使得页面的交互性更精彩，实际上我们经常会在进行网页浏览时简单这种类型的对话框，在用户与应用程序进行双向交流时，经常要用到对话框。
javascript的三种对话框是通过调用window对象的三个方法alert()，confirm()和prompt()来获得，可以利用这些对话框来完成js的输入和输出，实现与用户能进行交互的js代码。
今天小编就来简单介绍一下js中的三种弹出对话框，小编先单独对这几个方法进行详细讲解，接着，将这几个方法进行对比，好了，开始我们的js之旅吧`(*∩_∩*)′......
第一种：alert()方法
alert()方法是这三种对话框中最容易使用的一种，她可以用来简单而明了地将alert()括号内的文本信息显示在对话框中，我们将它称为警示对话框，要显示的信息放置在括号内，该对话框上包含一个“确认”按钮，用户阅读完所显示的信息后，只需单击该按钮就可以关闭对话框。下面来看一个使用alert()方法的例子，代码如下所示：
&title&编写html页面&/title&
&script language="javascript"& //JavaScript脚本标注
alert("上联：山石岩下古木枯");//在页面上弹出上联
alert("下联：白水泉边少女妙");//在页面上弹出下联
执行上面的小例子，在页面上弹出对话框并显示一句话“上联：山石岩下古木枯”，如下所示：
接着，单击“确认”按钮后再显示第二个对话框并显示“白水泉边少女妙！”，效果如下；
在页面上弹出对话框并显示一句话“上联：山石岩下古木枯”，单击“确认”按钮后再显示第2个对话框并显示“白水泉边少女妙！”我们来分析一下这个小例子：
a、在&script&脚本块中两次调用alert()方法；
b、在每个alert()括号内分别添加了一段文本信息，运行出现如下图所示的页面，当使用鼠标单击页面上的“确定”按钮后，出现第二个页面，再点击“确定”按钮后就关闭页面上的对话框。 注意：两个对话框是分别显示的，而不是一个覆盖另一个，这是因为js实在执行完第一个alert()并等到用户点击“确认”按钮之后才去执行第二个alert()的。
alert()是js的window对象的一个方法，调用时可以写成window.alert()，也可以写成alert()，功能都是产生一个带确认按钮的对话框，上面显示括号内的信息，
第二种：confirm()方法
confirm()方法与alert()方法的使用十分类似，不同点是在该种对话框上除了包含一个“确认”按钮外，还有一个“取消”按钮，这种对话框称为确认对话框，在调用window对象的confirm()方法以及后面介绍的prompt()方法时也可以不写window。下面来看一个关于confirm()的小例子,代码如下所示：
&title&编写html页面&/title&
&script language="javascript"& //js脚本标注
confirm("上联：一但重泥拦子路；下联：两岸夫子笑颜回"); //在页面上弹出确认对话框
显示效果如下：
分析一下这个小例子：
a、在&script&脚本块中添加confirm()方法、
b、在confirm()括号内添加了一段文本信息，运行效果如上图所示，如果用户单击“确认”按钮，则confirm()方法会返回true，如果用户单击“取消”按钮，则confirm()方法会返回false，无论用户选择哪个按钮，都会关闭对话框，而继续执行javascript代码。单击“确认”或“取消”按钮都是关闭对话框，似乎没有什么区别，实际上，无论是单击“确认”或“取消”按钮都会返回一个布尔值，这样就 可以再幕后有一些js代码来发挥按钮的作用，请大家看下面的例子，体会使用confirm()返回布尔值的妙处。代码如下：
&title&编写html页面&/title&
&script language="javascript"& //js脚本标注
con=confirm("你喜欢玫瑰花么?"); //在页面上弹出对话框
if(con==true)alert("非常喜欢!");
else alert("不喜欢!");
我们来分析一下这个小例子：
a、在&script&脚本块中声明了一个变量con。
b、con=confirm()一句将confirm()方法返回的布尔值赋给con。
c、通过if语句来使用con的值，分别执行不同的语句；执行的效果如下：
如果单击页面的确认框上的“确定”按钮后，出现如下图所示的页面：
如果单击“取消”按钮，则出现如下图所示的页面：
第三种： prompt()方法
alert()方法和confirm()方法的使用十分类似，都是仅仅显示已有的信息，但用户不能输入自己的信息，但是prompt()可以做到这点，她不但可以显示信息，而且还提供了一个文本框要求用户使用键盘输入自己的信息，同时她还包含“确认”或“取消”两个按钮，如果用户“确认”按钮，则prompt()方法返回用户在文本框中输入的内容（是字符串类型)或者初始值(如果用户没有输入信息);如果用户单击“取消”按钮，则prompt()方法返回null，我们称这种对话框为提示框，在这三种对话框中，她的交互性最好。
看下面一个小例子：在页面上两次弹出提示对话框，使用户能输入有关信息，代码如下：
&title&编写html页面&/title&
&script language="javascript"& //js脚本标注
name=prompt("请问你叫什么名字?"); /*在页面上弹出提示对话框，
将用户输入的结果赋给变量name*/
alert(name); //输出用户输入的信息
age=prompt("你今年多大了?","请在这里输入年龄"); /*在页面上再一次弹出提示对话框，
讲用户输入的信息赋给变量age*/
alert(age)//输出用户输入的信息
运行上面的程序，效果如下所示：
点击确定，会有这么惊喜nie：
我们再点击确定按钮：
再点击确定按钮：
分析一下这个小例子
a、在&script&脚本块中添加了两个prompt()方法。
b、在第一个prompt()括号内添加了一段文本信息。
c、name=prompt()一句是将用户在文本框中输入的信息赋给变量name。
alert()、confirm()、prompt()的区别和联系：
警告框alert()
alert是警告框，只有一个按钮“确定”无返回值，警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法：alert("文本")。
确认框confirm()
confirm是确认框，两个按钮，确定或者取消，返回true或false。确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。语法：confirm("文本")
提示框prompt()
prompt是提示框，返回输入的消息，或者其默认值提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。语法：prompt("文本","默认值")
本文主要介绍了javascript中的三种弹出对话框，分别是alert()方法，confirm()方法，prompt()方法，小编先对这几个方法进行了详细的单独介绍，紧接着，将这几个方法进行对比，除这三个弹出对话框之外，我们还可以使用document.write()直接将消息显示在页面上，BS学习，未完待续......同时感谢大家一直以来对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我想要弹框后3秒就自动消失，简单的用alert()怎么做？能做吗？？？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
就像楼上说的layer弹窗组件，里面有个layer.msg("Write your message.");是默认出现3秒钟然后消失的哦，下面是它的API描述：layer.msg(content, options, end) - 提示框
我在源码中有了相对较大的篇幅来定制了这个msg，目的是想将其打造成露脸率最高的提示框。而事实上我的确也在大量地使用它。因为它简单，而且足够得自觉，它不仅占据很少的面积，而且默认还会3秒后自动消失所有这一切都决定了我对msg的爱。因此我赋予了她许多可能在外形方面，它坚持简陋的变化，在作用方面，他坚持零用户操作。而且它的参数也是机会自动补齐的。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不能。alert的消失不受代码控制。可以考虑模拟弹框
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不能，alert（）的行为是由操作系统和浏览器底层设置决定的，HTML&CSS&JS没有权限操作它的外观和行为，但可用其他插件，其他元素模拟一个弹框，alert（）本来就是用来提示用户的，为毛你要让他自动消失？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
自定义一个div作为弹出框，使用jquery的函数显示然后定时关闭，比如$(".axc-success").show().delay(3000).fadeOut();
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不能实现，请使用自定义弹框。这个涉及到JavaScript阻塞和浏览器劫持，参考 想起以前一种跨站脚本攻击就是利用alert必须用户点击消失来进行大量的弹框，导致无法正常交互。不过这是题外话了（逃
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
/* *tankuang(pWidth,content)是一个验证表单的弹框提示的函数 *pWidth参数表示文本的宽度 *content表示传入的文本 */
function tankuang(pWidth,content)
$("#msg").remove();
var html ='&div id="msg" style="position:top:50%;width:100%;height:30line-height:30margin-top:-15"&&p style="background:#000;opacity:0.8;width:'+ pWidth +'color:#text-align:padding:10px 10margin:0font-size:12border-radius:4"&'+ content +'&/p&&/div&'
$("body").append(html);
var t=setTimeout(next,2000);
function next()
$("#msg").remove();
自己用jq写的仿layer.js写的弹框。可以复制一下然后调用
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不能，用插件，或者自己实现。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我的想法是有一个密码输入框，但是不需要点击就能弹出键盘。用获取焦点的方法不行，请问啥办法吗？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
js触发获取焦点或者触发点击事件不行吗？
或者 自己写个键盘？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
获取焦点不行，那就试试模拟一个点击事件。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我倒是觉得自己在网页上写一个模拟键盘比较好。这样也顺便防止了一些android浏览器网页上下翻飞还有软键盘弹出收起弹出收起的怪像。。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：js弹出窗口总结6种弹窗方法
我的图书馆
js弹出窗口总结6种弹窗方法
//关闭,父窗口弹出对话框,子窗口直接关闭
this.Response.Write("&script language=javascript&window.close();&/script&");
//关闭,父窗口和子窗口都不弹出对话框,直接关闭
this.Response.Write("&script&");
this.Response.Write("{top.opener =top.close();}");
this.Response.Write("&/script&");
//弹出窗口刷新当前页面width=200 height=200菜单。菜单栏,工具条,地址栏,状态栏全没有
this.Response.Write("&script language=javascript&window.open('rows.aspx','newwindow','width=200,height=200')&/script&");
//弹出窗口刷新当前页面
this.Response.Write("&script language=javascript&window.open('rows.aspx')&/script&");
this.Response.Write("&script&window.open('WebForm2.aspx','_blank');&/script&");
//弹出提示窗口跳到webform2.aspx页(在一个IE窗口中)
this.Response.Write(" &script language=javascript&alert('注册成功');window.window.location.href='WebForm2.aspx';&/script& ");
//关闭当前子窗口,刷新父窗口
this.Response.Write("&script&window.opener.location.href=window.opener.location.window.close();&/script&");
this.Response.Write("&script&window.opener.location.replace(window.opener.document.referrer);window.close();&/script&");
//子窗口刷新父窗口
this.Response.Write("&script&window.opener.location.href=window.opener.location.&/script&");
this.Response.Write("&script&window.opener.location.href='WebForm1.aspx';&/script&");
//弹出提示窗口.确定后弹出子窗口(WebForm2.aspx)
this.Response.Write("&script language='javascript'&alert('发表成功！');window.open('WebForm2.aspx')&/script&");
//弹出提示窗口,确定后,刷新父窗口
this.Response.Write("&script&alert('发表成功！');window.opener.location.href=window.opener.location.&/script&");
//弹出相同的一页
&INPUT type="button" value="Button" onclick="javascript:window.open(window.location.href)"&
Response.Write("parent.mainFrameBottom.location.href='yourwebform.aspx?temp=" +str+"';");
&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脚本结束
'newwin':隐藏菜单栏地址栏工具条
width=50:宽度
height=50:高度
scrollbars=yes/no:滚动条
top=50:窗口距离屏幕上方
left=50:窗口距离屏幕左侧
例:window.open('detail.aspx?ID="+e.Item.Cells[1].Text+"','newwin','width=750,height=600,scrollbars=yes,top=50,left=50');");
this.Response.Write("&Script&window.open('WebForm2.aspx','','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=750,height=470,left=80,top=40');&/script&");
this.Response.Write("&script&alert('发表成功！');window.opener.location.href=window.opener.location.&/script&");
this.Response.Write("&script&");
this.Response.Write("{top.opener =top.close();}");
this.Response.Write("&/script&");
例: linkcolumn1.DataNavigateUrlFormatString="javascript:varwin=window.open('edit_usr.aspx?actid={0}','newwin','width=750,height=600,scrollbars=yes,top=50,left=50');window.close()";
this.Response.Write("&Script&window.open('WebForm7.aspx','','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=750,height=470,left=80,top=40');&/script&");
弹出跟你当前的窗口有没有菜单工具栏没有关系,你只要在页面中写一个脚本它就弹出了.比如
&a href=# onclick="window.open('xxx.aspx','窗口名称','参数');"&xxxxx&/a&
以下列出一些弹出窗口的参数,你可自行设定,参数之间用逗号分隔
可选。字符串--列出对象表并用逗号分开。每一项都有自己的值，他们将被分开（如："fullscreen=yes, toolbar=yes"）。下面是被支持的各种特性。&&
channelmode = { yes | no | 1 | 0 } 是否在窗口中显示阶梯模式。默认为no。
directories = { yes | no | 1 | 0 } 是否在窗口中显示各种按钮。默认为yes。
fullscreen = { yes | no | 1 | 0 } 是否用全屏方式显示浏览器。默认为no。使用这一特性时需要非常小心。因为这一属性可能会隐藏浏览器的标题栏和菜单，你必须提供一个按钮或者其他提示来帮助使用者关闭这一浏览窗口。ALT+F4可以关闭窗口。一个全屏窗口必须使用阶梯(channelmode)模式。
height = number 指定窗口的高度，单位是像素。最小值是100。
left = number 指定窗口距左边框的距离，单位是像素。值必须大于或者等于0。
location = { yes | no | 1 | 0 } 指定是否在窗口中显示地址栏。默认为yes。
menubar = { yes | no | 1 | 0 } 指定是否在窗口中显示菜单栏。默认为yes。
resizable = { yes | no | 1 | 0 } 指定是否在窗口中显示可供用户调整大小的句柄。默认为yes。
scrollbars = { yes | no | 1 | 0 } 指定是否在窗口中显示横向或者纵向滚动条。默认为yes。
status = { yes | no | 1 | 0 } 指定是否在窗口中显示状态栏。默认为yes。
titlebar = { yes | no | 1 | 0 } 指定是否在窗口中显示标题栏。在非调用HTML Application或者一个对话框的情况下，这一项将被忽略。默认为yes。
toolbar = { yes | no | 1 | 0 } 指定是否在窗口中显示工具栏，包括如前进、后退、停止等按钮。默认为yes。
top = number 指定窗口顶部的位置，单位是像素。值必须大于或者等于0。
width = number 指定窗口的宽度，单位是像素。最小值是100。
【1、最基本的弹出窗口代码】
　　&SCRIPT LANGUAGE="javascript"&
　　window.open ('page.html')
　　&/SCRIPT&
　　因为这是一段javascripts代码，所以它们应该放在&SCRIPT LANGUAGE="javascript"&标签和&/script&之间。&!-- 和 --&是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。window.open ('page.html') 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以，只是不要混用。这一段代码可以加入HTML的任意位置，&head&和&/head&之间可以，&body&间&/body&也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。
【2、经过设置后的弹出窗口】
　　下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。
　　&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脚本结束
【3、用函数控制弹出窗口】
　　下面是一个完整的代码。
　　&html&
　　&head&
　　&script LANGUAGE="JavaScript"&
　　function openwin() {
　　window.open ("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") //写成一行
　　&/script&
　　&/head&
　　&body onload="openwin()"&
　　任意的页面内容...
　　&/body&
　　&/html&
　　这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢？
　　方法一：&body onload="openwin()"& 浏览器读页面时弹出窗口；
　　方法二：&body onunload="openwin()"& 浏览器离开页面时弹出窗口；
　　方法三：用一个连接调用：
　　&a href="#" onclick="openwin()"&打开一个窗口&/a&
　　注意：使用的“#”是虚连接。
　　方法四：用一个按钮调用：
　　&input type="button" onclick="openwin()" value="打开窗口"&
【4、同时弹出2个窗口】
　　 对源代码稍微改动一下：
　　&script LANGUAGE="JavaScript"&
　　function openwin() {
　　window.open ("page.html", "newwindow", "height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=n o, status=no")//写成一行
　　window.open ("page2.html", "newwindow2", "height=100, width=100, top=1 00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, loca tion=no, status=no")//写成一行
　　&/script&
　　为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可 。最后用上面说过的四种方法调用即可。
　　注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。&&
【5、主窗口打开文件1.htm，同时弹出小窗口page.html】
　　如下代码加入主窗口&head&区：
　　&script language="javascript"&
　　function openwin() {
　　window.open("page.html","","width=200,height=200")
　　&/script&
　　加入&body&区：
　　&a href="1.htm" onclick="openwin()"&open&/a&即可。
【6、弹出的窗口之定时关闭控制】
　　下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段 代码加入弹出的页面(注意是加入page.html的HTML中，不是主页面中)，让它10秒后自动关闭是不是更酷了？
首先，将如下代码加入page.html文件的&head&区：
　　&script language="JavaScript"&
　　function closeit()
　　setTimeout("self.close()",10000) //毫秒
　　&/script&
　　然后，再用&body onload="closeit()"& 这一句话代替page.html中原有的&BODY&这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。)&
TA的推荐TA的最新馆藏
喜欢该文的人也喜欢