鼠标点击页面任何位置,打开新窗口的实现方法

2011年07月05日 Dedecms 暂无评论 阅读 9,618 views 次

大家在上某些网站的时候,可能会遇到这样的一种情况:在首页上任何位置点击都会弹出一些广告窗口。这是非常让人讨厌的效果,但今天,一个客户需要用些功能来实现用户注册的效果。同样的用法,目的不同给人的感觉也就不同。所以说,事物都是有两重性的。哈哈,有点跑题了,回到今天的主题上来。

其实题目也可以写成,鼠标左键点击强制弹窗效果。这个不重要,关键是看下面如何来实现。此效果,我折腾了半天才搞定,特拿出来分享,毕竟我是半路出家的,有很多东西需要学习。

第一种方法:以新窗口方式打开。

这种方法在IE和Firefox下效果有点不同,我用的是IE9、Firefox5,在IE9下以新标签方式打开,所以新窗口在非当前状态。而Firefox下是跳出在当前窗口。这种方法有点不太好,所以我选择了另外一种方法。但还是写出实现的方法,供大家学习。由于代码会被替换掉,所以我只能用图来给大家显示了。抱歉了各位。

鼠标点击弹窗 1

window.open 弹出新窗口的命令;
http://www.opsers.org/ 弹出窗口的连接地址;
newwindow 弹出窗口的名字(可以随便写),非必须,可用空""代替;
width=1000 窗口宽度;以象素px为单位
height=700 窗口高度;以象素px为单位
top=50 窗口距离屏幕上方的象素值;
left=250 窗口距离屏幕左侧的象素值;
toolbar=no 是否显示工具栏,yes为显示,也可以用1来表示;
menubar=no 是否显示菜单栏;
scrollbars 是否显示滚动栏;
resizable=no 是否允许改变窗口大小;
location=no 是否显示地址栏;
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;
注意:
1、以上参数之间用“,”分隔开
2、px是默认的,所以在数值后面不用增加
3、yes/no可以用1/0来代替,效果一样
4、关于更多的参数,大家可以在网上找点资料,我就收集这些了。

 

第二种方法:以对话框方式打开窗口

这种方法在IE和Firefox下效果一样,都会在当前活动页面打开,还可以限制只有关闭新打开的对话框,才能操作后面的页面的效果。此功能就是我的客户所需要的。下面看看是如何来实现的。

鼠标点击弹窗 2

dialogWidth=950px 设置对话框窗口的宽度,后面需要带px单位。
dialogHeight=600px 设置对话框窗口的高度。
dialogLeft=100px 设置对话框窗口相对于桌面左上角的left位置。
dialogTop=100pxs 设置对话框窗口相对于桌面左上角的top位置。
center=[yes | no | 1 | 0 ] 指定是否将对话框在桌面上居中,默认值是“yes”。
help=[yes | no | 1 | 0 ] 指定对话框窗口中是否显示上下文敏感的帮助图标。默认值是“yes”。
resizable=[yes | no | 1 | 0]指定是否对话框窗口大小可变。默认值是“no”。
status=[yes | no | 1 | 0 ]指定对话框窗口是否显示状态栏。对于非模式对话框窗口,默认值是“yes”;对于模式对话框窗口,默认值是 “no”。

至于showModalDialog()与showModelessDialog()的区别,在于showModalDialog()打开的窗口(简称模 式窗口),置在父窗口上,必须关闭才能访问父窗口;showModelessDialog()(简称无模式窗口),打开后 不必关闭也可访问父窗口打开的窗口。

注意:这里面的设置与第一种有些不同

1、单位必需加上px

2、多参数之间用“;”分隔

最后说明一下:

1、以上两个代码,要放到<body>之间,才能起效果

2、以上两个代码都是点击鼠标左键弹窗的效果

3、如果只执行一次点击弹窗的话,请把第二个isPoped = false;改成isPoped = ture;否则只要在网页上点鼠标就会弹窗。而改了后,只对第一次起作用。

题外话:使用此方法,希望各位站长,能给用户带来更好体验效果,而不是一味的弹广告。

给我留言

Copyright © 羽飞博客 保留所有权利.   Ality主题 皖ICP备14013844号-1

用户登录