让js弹出窗口居前显示的实现方法


Posted in Javascript onJuly 10, 2013

具体步骤:

方法一:弹出窗口<body>里加上代码:onblur="self.focus()":
<body onblur="self.focus()">

方法二:用showModalDialog方法建立模式对话框,它的参数说明如表1.5.2所示。
<script>
   function topwin(){
   window.showModalDialog(http://www.3water.com,"","dialogWidth:300px;dialogHeight:300px;scroll:no;status:no")
   }
</script>
<button onClick="topwin()">打开模式窗口</button>

方法三:用showModelessDialog方法建立无模式对话框,它的参数跟模式对话框完全一样,可以参考表1.5.2。
<script>
   function topwin(){
   window.showModelessDialog("https://3water.com","","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 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
Vue三层嵌套路由的示例代码
May 05 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 #Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 #Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 #Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 #Javascript
javascript 手动给表增加数据的小例子
Jul 10 #Javascript
基于javascript 闭包基础分享
Jul 10 #Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 #Javascript
You might like
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
JS 实现完美include载入实现代码
2010/08/05 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
巧用canvas
2017/01/21 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
Python程序控制语句用法实例分析
2020/01/14 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
C#面试问题
2016/07/29 面试题
预备党员的自我评价
2014/03/12 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
学生安全承诺书
2014/05/22 职场文书
旅游投诉信范文
2015/07/02 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL