JS弹窗全攻略：window.open与window.showModalDialog

"这篇文章主要介绍了JavaScript中用于弹出窗口的各种方法，包括`window.open()`、`window.showModalDialog()`等，以及自定义弹窗位置的函数。这些方法可以帮助开发者实现不同类型的用户交互，如新窗口打开链接、模态对话框等。" 在JavaScript中，弹出窗口是常见的用户界面交互手段，下面我们将详细讨论这些知识点： 1. `window.open()` 方法：这是JavaScript中最常用的弹出新窗口的方法。`window.open(url, name, features)` 其中，`url` 是要打开的页面地址，`name` 是新窗口的名称，可以用来引用该窗口，而 `features` 是一个包含窗口属性的字符串，如宽度、高度、是否可调整大小、是否有滚动条等。例如： ```javascript var newWindow = window.open('https://example.com', 'newWindow', 'width=800,height=600'); ``` 这将打开一个800x600像素的新窗口，加载`https://example.com`的内容。 2. `window.showModalDialog()` 方法：此方法创建一个模态对话框，意味着用户必须与对话框交互后才能继续操作页面。`window.showModalDialog(url, dialogArguments, features)`，参数 `dialogArguments` 可以传递数据到对话框，`features` 与 `window.open()` 类似，定义窗口属性。返回值可以用于获取对话框的结果，例如： ```javascript var returnValue = window.showModalDialog('dialog.html', '', 'width=400,height=300'); console.log(returnValue); ``` 这将在新对话框中打开`dialog.html`，关闭后返回值可以通过`window.returnValue`获取。 3. 自定义窗口位置：为了使弹出窗口更具用户体验，可以自定义窗口的开启位置。如提供的代码中的 `g_OpenSizeWindow` 函数，它计算屏幕可用宽度和高度，然后在屏幕中央打开新窗口。这个函数接收 `pageURL`（要打开的页面）、`innerWidth` 和 `innerHeight`（窗口的宽度和高度）作为参数，确保窗口居中显示。 4. 关闭窗口：`window.close()` 方法用于关闭当前窗口，但只能由创建该窗口的脚本调用。例如，如果要在5秒后自动关闭窗口，可以使用 `setTimeout`： ```javascript setTimeout(function() { window.close(); }, 5000); ``` 5. 兼容性问题：需要注意的是，某些功能可能在不同的浏览器中有不同的行为。例如，`window.showModalDialog()` 主要被IE支持，其他现代浏览器可能不推荐或不完全支持。因此，使用时要考虑跨浏览器兼容性。 通过以上方法，开发者可以根据项目需求灵活地创建各种弹出窗口效果，提供更丰富的用户交互体验。在实际应用中，还需结合CSS和HTML来定制窗口样式和内容，以达到最佳效果。