JavaScript中showModalDialog与showModelessDialog的使用技巧

TXT文件

下载需积分: 9 | 5KB | 更新于2025-02-14 | 185 浏览量 | 举报收藏

立即下载

"这篇文章主要探讨了JavaScript中的两个对话框函数：showModalDialog和showModelessDialog的使用体验和区别。作者分享了它们在不同场景下的应用，并提供了避免用户强制刷新页面的一些技巧。" 在Web开发中，JavaScript提供了一些内置方法来创建与用户的交互式对话，其中`showModalDialog`和`showModelessDialog`是两个重要的对话框函数。这两个函数都是用来打开一个新的浏览器窗口，但它们在功能和使用上存在显著差异。 `showModalDialog`是一个模态对话框，它会阻止用户与当前页面进行交互，直到对话框关闭。这意味着用户必须先处理弹出的对话框，才能继续与主窗口进行操作。它的典型应用场景是需要用户输入信息或者确认某些操作的情况，如登录、表单填写等。使用`showModalDialog`时，可以通过传递参数来设置对话框的初始状态，例如： ```javascript window.showModalDialog("dialog.html", window, "dialogWidth:400px;dialogHeight:300px"); ``` 在上面的例子中，"dialog.html"是要打开的页面，`window`是对话框的父窗口，而`"dialogWidth:400px;dialogHeight:300px"`是一些对话框的样式设置。 `showModelessDialog`则是一个非模态对话框，它允许用户在打开对话框的同时继续与主窗口进行交互。这通常用于提供辅助信息或工具，而不会打断用户的流程。比如，显示帮助文档或设置面板时可以使用`showModelessDialog`。与`showModalDialog`相似，也可以传递参数来定制对话框： ```javascript window.showModelessDialog("dialog.html", window, "dialogWidth:400px;dialogHeight:300px"); ``` 然而，由于这两种对话框都会打开新的窗口，因此在某些情况下可能会影响用户体验，比如阻止了F5键刷新页面。为了避免这种情况，可以使用`<base>`标签和JavaScript来处理F5刷新事件，确保在用户按下F5时仍能正常刷新页面。例如： ```html <body onkeydown="if(event.keyCode==116){reload.click()}"> <a id="reload" href="filename.htm" style="display:none">reload</a> ``` 同时，如果需要在对话框关闭后返回特定的值，可以利用`dialogArguments`属性。当对话框关闭时，可以通过`window.dialogArguments`获取到对话框传递的值： ```javascript // 在对话框中设置值 window.dialogArguments = " oyiboy"; // 在调用对话框的页面中获取值 alert(window.dialogArguments); // 输出 "oyiboy" ``` `showModalDialog`和`showModelessDialog`是JavaScript中实现用户交互的有力工具，但需要注意它们对用户体验的影响，以及如何妥善处理相关事件。在现代Web开发中，考虑到浏览器兼容性和更好的用户体验，开发者可能会倾向于使用更灵活的弹窗库，如Bootstrap的模态框或自定义的HTML/CSS/JavaScript组件来替代这些原生的对话框函数。

showModalDialog和showModelessDialog使用心得

［作者：不详转贴自：不详点击数：33 字体:【大中小】更新时间：2006-4-13 20:54:19］

showModalDialog和showModelessDialog使用心得
一、showModalDialog和showModelessDialog有什么不同？
　　showModalDialog：被打开后就会始终保持输入焦点。除非对话框被关闭，否则用户无法切换到主窗口。类似alert的运行效果。
　　showModelessDialog：被打开后，用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一下而以。:P)

二、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口？
　　在被打开的网页里加上<base target="_self">就可以了。这句话一般是放在<html>和<body>之间的。

三、怎样才刷新showModalDialog和showModelessDialog里的内容？
　　在showModalDialog和showModelessDialog里是不能按F5刷新的，又不能弹出菜单。这个只能依靠javascript了，以下是相关代码：

<body onkeydown="if (event.keyCode==116){reload.click()}">
<a id="reload" href="filename.htm" style="display:none">reload...</a>

　　将filename.htm替换成网页的名字然后将它放到你打开的网页里，按F5就可以刷新了，注意，这个要配合<base target="_self">使用，不然你按下F5会弹出新窗口的。

四、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。
　　<input type="button" value="关闭" onclick="window.close()">
　　也要配合<base target="_self">，不然会打开一个新的IE窗口，然后再关掉的。

五、showModalDialog和showModelessDialog数据传递技巧。
　　(作者语：本来想用一问一答形式来写的，但是我想不出这个怎么问，所以只好这样了。)
　　这个东西比较麻烦，我改了好几次了不是没办法说明白(语文水平越来越差了)，只好用个例子说明了。
　　例子：
　　　　现在需要在一个showModalDialog(或showModelessDialog)里读取或设置一个变量var_name

下载后可阅读完整内容，剩余2页未读，立即下载