JavaScript showModalDialog详解与示例
"这篇文章主要介绍了JavaScript中的`showModalDialog`函数的使用方法和注意事项,包括其参数含义和一些常见的特性设置。" `showModalDialog`是JavaScript中的一个方法,用于打开一个模态对话框,即在打开的对话框关闭之前,用户无法与对话框后面的内容进行交互。该函数的基本语法如下: ```javascript vReturnValue = window.showModalDialog(sURL[, vArguments][, sFeatures]) ``` 1. `sURL`:这个参数指定了对话框要显示的资源的URL,可以是相对路径或绝对路径。通常,它会加载一个新的HTML页面或者同一个页面的一个部分。 2. `vArguments`:可选参数,传递给对话框窗口的任何数据。这些值可以通过`window.dialogArguments`在新窗口中访问。如果不需要传递参数,可以直接省略或传入null。 3. `sFeatures`:可选参数,用来设置对话框的特性,如高度、宽度、位置等。这是一个字符串,由逗号分隔的键值对组成,比如`"dialogWidth:400px;dialogHeight:300px;"`。 以下是一些常见的`sFeatures`设置: - `dialogHeight`:设置对话框的高度,例如`"dialogHeight:400px"`。 - `dialogWidth`:设置对话框的宽度,例如`"dialogWidth:600px"`。 - `dialogLeft`和`dialogTop`:分别设置对话框相对于屏幕左上角的水平和垂直偏移量。 - `center`:若设置为`yes`或`1`,对话框将居中显示。 - `help`:如果设置为`yes`或`1`,将在对话框中显示帮助按钮。 - `resizable`:控制对话框是否可调整大小,`yes`或`1`表示可以,`no`或`0`表示不可以。 - `status`:在IE5+中,`yes`或`1`表示显示状态栏,`no`或`0`表示不显示。 - `scroll`:控制是否显示滚动条,`yes`、`1`、`on`表示显示,`no`、`0`、`off`表示不显示。 - `dialogHide`:在对话框打开时是否隐藏原窗口,`yes`、`1`、`on`表示隐藏,`no`、`0`、`off`表示不隐藏。 - `edge`:设置对话框边框样式,`sunken`表示凹陷,`raised`表示凸起。 - `unadorned`:若设置为`yes`、`1`或`on`,则对话框不显示标准的系统装饰(如最大化、最小化和关闭按钮)。 示例代码中展示了如何使用`showModalDialog`打开一个对话框,并传递参数。例如: ```javascript var url_pop = "<%=baseURL%>/train/manage/trainPresenceInputRemarkEdit.jsp?remark=" + remark; var newRemark = showModalDialog(url_pop, window, "dialogWidth:" + popwidth + "px;dialogHeight:" + popheight + "px;status:0;scroll:0;help:0;"); ``` 在这个例子中,`url_pop`包含了对话框要加载的页面地址以及通过URL查询字符串传递的参数`remark`。`sFeatures`设置了对话框的宽度、高度,关闭了状态栏和滚动条,且没有帮助按钮。 需要注意的是,`showModalDialog`在某些现代浏览器中可能已被废弃或不推荐使用,因为它们倾向于使用更灵活、更具可访问性的对话框替代方案,如`<dialog>`元素。因此,在开发新项目时,应考虑使用现代Web标准提供的替代方法。
window.showModalDialog()---用来创建一个显示HTML内容的模态对话框。
使用方法:
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
参数说明:
sURL -- 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
vArguments -- 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures -- 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
------------------------------------------------------------------------------------------------
1. dialogHeight: 对话框高度,不小于100px
2. dialogWidth: 对话框宽度。
3. dialogLeft: 离屏幕左的距离。
4. dialogTop: 离屏幕上的距离。
5. center: { yes | no | 1 | 0 } : 是否居中,默认yes,但仍可以指定高度和宽度。
6. help: {yes | no | 1 | 0 }: 是否显示帮助按钮,默认yes。
7. resizable: {yes | no | 1 | 0 } [IE5+]: 是否可被改变大小。默认no。
8. status: {yes | no | 1 | 0 } [IE5+]: 是否显示状态栏。默认为yes[ Modeless]或no[Modal]
9. scroll: { yes | no | 1 | 0 | on | off }:是否显示滚动条。默认为yes。
下面几个属性是用在HTA中的,在一般的网页中一般不使用。
10. dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
11. edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
12. unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。
二、showModalDialog传参问题总结
1、url后面跟参数方式:
var url_pop = "<%=baseURL %>/train/manage/trainPresenceInputRemarkEdit.jsp?remark="+remark;
var newRemark = showModalDialog(url_pop, window,"dialogWidth:"+ popwidth +"px;dialogHeight:"+ popheight +"px;status:0;scroll:0;help:0;" );
下载后可阅读完整内容,剩余2页未读,立即下载
- 粉丝: 0
- 资源: 5
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- JSP+SSM科研管理系统响应式网站设计案例
- 推荐一款超级好用的嵌入式串口调试工具
- PHP域名多维查询平台:高效精准的域名搜索工具
- Citypersons目标检测数据集:Yolo格式下载指南
- 掌握MySQL面试必备:程序员面试题解析集锦
- C++软件开发培训:核心技术资料深度解读
- SmartSoftHelp二维码工具:生成与解析条形码
- Android Spinner控件自定义字体大小的方法
- Ubuntu Server on Orangepi3 LTS 官方镜像发布
- CP2102 USB驱动程序的安装与更新指南
- ST-link固件升级指南:轻松更新程序步骤
- Java实现的质量管理系统Demo功能分析与操作
- Everything高效文件搜索工具:快速精确定位文件
- 基于B/S架构的酒店预订系统开发实践
- RF_Setting(E22-E90(SL)) V1.0中性版功能解析
- 高效转换M3U8到MP4:免费下载工具发布