在 Chrome 37 版本中，window.showmodaldialog 方法不再被支持，这对于前端开发者来说可能会带来一些问题。本篇文章将介绍如何在 Chrome 37 中使用 window.showmodaldialog，并提供一些实用的示例代码。
什么是 window.showmodaldialog？
window.showmodaldialog 是一个 JavaScript 方法，它可以在当前页面上弹出一个模态对话框。与 window.open 方法不同，它可以阻止用户操作其他浏览器窗口，直到关闭对话框。
但是，由于安全漏洞的存在，Chrome 37 开始不再支持该方法，因此，如果您在 Chrome 37 中尝试使用该方法，将会得到以下错误提示：
-------- ---------- ------ ------- ------- --- -- ------ -----------------
解决方案
虽然 Chrome 37 不再支持 window.showmodaldialog 方法，但我们可以使用其他替代方案，例如自定义模态对话框或者使用第三方库。
自定义模态对话框
使用自定义模态对话框最简单的方式就是使用 HTML、CSS 和 JavaScript 实现它。下面是示例代码：
---- ---- ---
---- ----------- ---------------
---- -----------------------
-----------
---------
------- -----------------------------------
------
------
---- --- ---
-------
------- -
-------- -----
--------- ------
---- --
------ --
------- --
----- --
----------------- ------- -- -- ----
-
--------------- -
--------- ---------
---- ----
----- ----
---------- --------------- ------
------ ------
-------- -----
----------------- -----
-------------- ----
-
--------
---- ---------- ---
--------
-------- ------------ -
----------------------------------------------- - --------
-
-------- ------------- -
----------------------------------------------- - -------
-
---------在这个示例中，我们创建了一个 id 为 dialog 的 div 元素，并将其设置为固定定位。通过设置 display:none 样式隐藏它，调用 openDialog 函数来显示它，调用 closeDialog 函数来关闭它。
使用第三方库
除了自定义模态对话框之外，还有一些像 Bootstrap、jQuery UI 等第三方库可以提供模态对话框功能。以 Bootstrap 为例，我们可以使用以下代码实现模态对话框：
---- ---- ---
---- ------------ ----- ------------ ------------- --------------
---- -------------------- ----------------
---- ----------------------
---- ---------------------
--- ---------------------------
------- ------------- ------------- -------------------- -------------------
----- ---------------------------------
---------
------
---- -------------------
---------
------
---- ---------------------
------- ------------- ---------- -------------- --------------------------------
------
------
------
------
---- ---------- ---
--------
----------------------------
---------在这个示例中，我们使用了 Bootstrap 的模态对话框组件，并在 JavaScript 中调用 $('#myModal').modal('show') 来显示它。
总结
在 Chrome 37 中，window.showmodaldialog 方法不再被支持。为了解决这个问题，我们可以自定义模态对话框或者使用第三方库。无论选择哪种方式，都需要确保我们的代码是安全的并且能够正常工作，这样
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29101