"本文将详细介绍JavaScript中的`showModalDialog`函数的用法,以及如何传递参数。通过实例代码展示如何调整对话框的尺寸和位置,以及如何处理返回值。" 在JavaScript中,`showModalDialog`是一个用于打开模态对话框的内置函数,它能够阻塞用户对页面其他部分的交互,直到关闭该对话框。这个功能常用于需要用户确认信息、输入数据或者进行特定操作的场景。 首先,我们来看一下如何设置对话框的尺寸和位置。在提供的代码片段中,`onload`事件被用来计算对话框的理想尺寸和位置。当页面加载完成后,`scrollWidth`和`scrollHeight`属性用于获取文档的实际宽度和高度,而`availWidth`和`availHeight`则获取屏幕可用的宽度和高度。通过比较这些值,我们可以确定对话框的最佳大小,并使用`dialogWidth`和`dialogHeight`来存储结果。同时,`dialogLeft`和`dialogTop`计算出对话框相对于屏幕中心的位置。 接下来,`turn_pyxz`函数展示了如何调用`showModalDialog`。在这个例子中,它打开了一个名为"Invoice_FPSource.html"的页面,并传递了一个空字符串`l_Features`作为对话框特性。特性字符串可以包含如"dialogHeight"和"dialogWidth"这样的选项,用于指定对话框的高度和宽度。在这里,由于`l_Features`是空的,所以对话框的尺寸默认由打开它的页面决定。 `showModalDialog`函数会返回一个值,这通常是在对话框中执行某些操作的结果。在`turn_pyxz`函数中,返回值被分割成两个部分,分别赋值给页面上的两个元素`fpzldm`和`get_fphm`。这意味着对话框可能返回一个逗号分隔的字符串,其中包含了多个值。 最后,`get_returnvalue`函数展示了如何获取并处理`showModalDialog`返回的值。在这个例子中,返回值被连接成一个字符串,但实际应用中,你可以根据需要进行更复杂的处理。 总结来说,`showModalDialog`是一个强大的功能,允许开发者创建自定义的模态对话框,提供丰富的交互体验。通过精确控制对话框的尺寸、位置和返回值,开发者可以构建出满足特定需求的用户界面。然而,需要注意的是,由于`showModalDialog`在现代浏览器中可能不被支持或存在兼容性问题,因此在新的开发项目中,推荐使用`HTML5`的`<dialog>`元素或者库如`Bootstrap`的模态组件来替代。
window.onload = function()
{
if( document.body.scrollWidth > (window.screen.availWidth-100) ){
window.dialogWidth = (window.screen.availWidth-100).toString() + "px"
}else{
window.dialogWidth = (document.body.scrollWidth +50).toString() + "px"
}
if( document.body.scrollHeight > (window.screen.availHeight-70) ){
window.dialogHeight = (window.screen.availHeight-50).toString() + "px"
}else{
window.dialogHeight = (document.body.scrollHeight +115).toString() + "px"
}
window.dialogLeft = ((window.screen.availWidth - document.body.clientWidth) / 2).toString() + "px"
window.dialogTop = ((window.screen.availHeight - document.body.clientHeight) / 2).toString() + "px"
}
2.返回多个参数值
//在原来页面的跳转方法中
function turn_pyxz(){
var l_Features="dialogHeight:0px;dialogWidth:0px;";
var returnvalue=window.showModalDialog("Invoice_FPSource.html", l_Features);
document.getElementById('fpzldm').value=returnvalue.split(",")[0];
document.getElementById('get_fphm').value=returnvalue.split(",")[1];
//在跳转后的页面的返回值方法中
function get_returnvalue(){
returnValue=form.get_fpzldm.value+","+form.get_fphm.value;
window.close();
下载后可阅读完整内容,剩余1页未读,立即下载
- 粉丝: 0
- 资源: 4
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展