让js弹出窗口居前显示的实现方法
更新时间：2013年07月10日 11:42:08 作者：
一般来说，显示在最前面的窗口都是因为窗口被激活获得焦点，要使窗口永远显示在最前面，可以人为的设置窗口在blur时立刻focus，或者用模式、无模式对话框实现
具体步骤：
方法一：弹出窗口<body>里加上代码：onblur="self.focus()"：
<body onblur="self.focus()">
方法二：用showModalDialog方法建立模式对话框，它的参数说明如表1.5.2所示。
<script>
function topwin(){
window.showModalDialog(http://www.jb1.net,"","dialogWidth:300px;dialogHeight:300px;scroll:no;status:no")
}
</script>
<button onClick="topwin()">打开模式窗口</button>
方法三：用showModelessDialog方法建立无模式对话框，它的参数跟模式对话框完全一样，可以参考表1.5.2。
<script>
function topwin(){
window.showModelessDialog("https://www.jb51.net","","dialogWidth:300px;dialogHeight:300px;scroll:no;status:no")
}
</script>
<button onClick="topwin()">打开无模式窗口</button>
注意：模式对话框会始终保持焦点。除非关闭对话框，否则无法切换窗口。 无模式对话框不会始终保持焦点，但始终保持显示在最前端。
特别说明
本例主要是模式对话框和无模式对话框的应用，必须注意两种对话框的异同。
表1.5.2 showModalDialog方法的参数列表
参数取值说明
sURL必选项。字符串(String)。指定要载入和显示的 URL。
vArguments可选项。字符串(String)。指定供显示文档时使用的变量。利用这个参数可以传递任何类型的值，包括包含多个值得的数组。对话框可以通过调用程序从 window 对象的 dialogArguments 属性提取这些值。
sFeatures可选项。字符串(String)。指定对话框的窗口装饰。使用下面的值。多个之间用分号隔开。
dialogHeight : sHeight设置对话框的高度
dialogLeft : sXPos设置对话框左上角相对于桌面的横坐标。
dialogTop : sYPos设置对话框左上角相对于桌面的纵坐标。
dialogWidth : sWidth设置对话框的宽度。
center : yes | no | 1 | 0 | on | off指定对话框是否显示于桌面正中。默认值为 yes 。
dialogHide : yes | no| 1 | 0 | on | off指定当打印或打印预览时对话框是否隐藏。仅仅当对话框是由被信任的程式打开的时候此参数才可用。默认值为 no 。
edge : sunken | raised指定对话框窗口边框样式为凹下还是凸起的。默认值为 raised 。
help : yes | no | 1 | 0 | on | off指定对话框是否显示上下文相关的帮助图标。默认值为 yes 。
resizable : yes | no | 1 | 0 | on | off指定对话框是否可以被用户改变尺寸。默认值为 no 。
scroll : yes | no | 1 | 0 | on | off指定对话框是否显示滚动条。默认值为 yes 。
status : yes | no | 1 | 0 | on | off指定对话框是否显示状态条。对于不被信任的对话框默认值为 yes 。对于被信任的对话框默认值为 no 。
unadorned : yes | no | 1 | 0 | on | off指定对话框是否显示 chrome 样式边框。仅仅当对话框是由被信任的程式打开的时候此参数才可用。默认值为 no 。
方法一：弹出窗口<body>里加上代码：onblur="self.focus()"：
<body onblur="self.focus()">
方法二：用showModalDialog方法建立模式对话框，它的参数说明如表1.5.2所示。
<script>
function topwin(){
window.showModalDialog(http://www.jb1.net,"","dialogWidth:300px;dialogHeight:300px;scroll:no;status:no")
}
</script>
<button onClick="topwin()">打开模式窗口</button>
方法三：用showModelessDialog方法建立无模式对话框，它的参数跟模式对话框完全一样，可以参考表1.5.2。
<script>
function topwin(){
window.showModelessDialog("https://www.jb51.net","","dialogWidth:300px;dialogHeight:300px;scroll:no;status:no")
}
</script>
<button onClick="topwin()">打开无模式窗口</button>
注意：模式对话框会始终保持焦点。除非关闭对话框，否则无法切换窗口。 无模式对话框不会始终保持焦点，但始终保持显示在最前端。
特别说明
本例主要是模式对话框和无模式对话框的应用，必须注意两种对话框的异同。
表1.5.2 showModalDialog方法的参数列表
参数取值说明
sURL必选项。字符串(String)。指定要载入和显示的 URL。
vArguments可选项。字符串(String)。指定供显示文档时使用的变量。利用这个参数可以传递任何类型的值，包括包含多个值得的数组。对话框可以通过调用程序从 window 对象的 dialogArguments 属性提取这些值。
sFeatures可选项。字符串(String)。指定对话框的窗口装饰。使用下面的值。多个之间用分号隔开。
dialogHeight : sHeight设置对话框的高度
dialogLeft : sXPos设置对话框左上角相对于桌面的横坐标。
dialogTop : sYPos设置对话框左上角相对于桌面的纵坐标。
dialogWidth : sWidth设置对话框的宽度。
center : yes | no | 1 | 0 | on | off指定对话框是否显示于桌面正中。默认值为 yes 。
dialogHide : yes | no| 1 | 0 | on | off指定当打印或打印预览时对话框是否隐藏。仅仅当对话框是由被信任的程式打开的时候此参数才可用。默认值为 no 。
edge : sunken | raised指定对话框窗口边框样式为凹下还是凸起的。默认值为 raised 。
help : yes | no | 1 | 0 | on | off指定对话框是否显示上下文相关的帮助图标。默认值为 yes 。
resizable : yes | no | 1 | 0 | on | off指定对话框是否可以被用户改变尺寸。默认值为 no 。
scroll : yes | no | 1 | 0 | on | off指定对话框是否显示滚动条。默认值为 yes 。
status : yes | no | 1 | 0 | on | off指定对话框是否显示状态条。对于不被信任的对话框默认值为 yes 。对于被信任的对话框默认值为 no 。
unadorned : yes | no | 1 | 0 | on | off指定对话框是否显示 chrome 样式边框。仅仅当对话框是由被信任的程式打开的时候此参数才可用。默认值为 no 。
相关文章
深入探讨JavaScript异步编程中Promise的关键要点
这篇文章将全面深入地探讨Promise，包括其前身、历史、能力、优点、缺点以及提供每个方法的案例，感兴趣的小伙伴可以跟随小编一学习一下2023-06-06
Javascript 各浏览器的 Javascript 效率对比
2008-01-01
下面小编就为大家带来一篇浅谈js数据类型判断与数组判断。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要为大家详细介绍了javascript实现贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
这篇文章主要介绍了javascript 通用loading动画效果实例代码，有需要的朋友可以参考一下2014-01-01
这篇文章主要介绍了Js+Jq获取URL参数的集中方法,需要的朋友可以参考下2014-05-05
JS触发事件event.target VS event.currentTarget实例
这篇文章主要介绍了JS触发事件event.target VS event.currentTarget实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要为大家详细介绍了JavaScript实现QQ聊天消息展示和评论提交功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
菜单效果...2006-10-10
JavaScript 有Date、Array、String等这样的内置对象，功能强大使用简单，人见人爱，但在处理一些复杂的逻辑的时候，内置对象就很无力了，往往需要开发者自定义对象2013-08-08
最新评论