JavaScript 中的 alert() 函数是一个常用的对话框，它可以用来向用户展示一些信息并等待用户点击 OK 或 Cancel 按钮。但是，由于历史原因，这个对话框默认的按钮文本是 OK/Cancel，而不是常见的 Yes/No。
本篇文章将介绍如何使用 JavaScript 和 HTML/CSS 来自定义对话框的样式和按钮文本，以便更好地满足你的需求。
步骤 1：创建 HTML 和 CSS
首先，我们需要在 HTML 中创建一个模态对话框，然后使用 CSS 来自定义它的外观和按钮的样式。下面是一个简单的 HTML 示例代码：
-- -------------------- ---- -------
---- --------------
---- ----------------------
-- ----------------------------
---- ----------------
------- -------------------------------
------- -----------------------------
------
------
------上面的代码创建了一个包含提示消息和两个按钮的对话框。提示消息位于 <p> 标签中，而按钮则是两个带有相应类名的 <button> 元素。
接下来，我们需要使用 CSS 来设置对话框和按钮的样式。以下是一个简单的 CSS 示例代码：
-- -------------------- ---- -------
------ -
-------- -----
--------- ------
-------- --
----- --
---- --
------ -----
------- -----
--------- -----
----------------- ----------------
-
-------------- -
----------------- --------
------- --- -----
-------- -----
------- --- ----- -----
------ ----
---------- ------
-
-------- -
-------- -----
---------------- --------------
----------- -----
-
------------ ---------- -
-------- -----
-------------- ----
------- -----
------- --------
------------ -----
------ ------
-
----------- -
----------------- ------
-
---------- -
----------------- ----
-上面的 CSS 代码设置了对话框和按钮的样式。其中，.modal 类用于创建半透明遮罩层，.modal-content 类用于设置对话框的样式，而 .yes-button 和 .no-button 两个类则用于设置两个按钮的样式。
步骤 2：创建 JavaScript 函数
接下来，我们需要创建一个 JavaScript 函数来显示和隐藏自定义对话框，并处理用户的选择。以下是一个简单的 JavaScript 示例代码：
-- -------------------- ---- -------
-------- ------------------ --------- -
--- ----- - ---------------------------------
--- -------------- - -----------------------------------
--- --------- - --------------------------------------
--- -------- - -------------------------------------
-------------------------- - --------
----------------------------------- ---------- -
------------------- - -------
---------------
---
---------------------------------- ---------- -
------------------- - -------
----------------
---
------------------- - --------
-上面的代码定义了一个名为 showAlert() 的函数，它接受两个参数：一个提示消息和一个回调函数。该函数首先获取对话框中的元素，并将传入的提示消息设置为对话框中的文本。
然后，当用户点击 Yes/No 按钮时，对话框会隐藏并调用传入的回调函数，将 true 或 false 值作为参数传递给它。
步骤 3：测试代码
现在我们已经准备好测试自定义 Alert 对话框了！以下是一个使用自定义 Alert 对话框的示例代码：
showAlert('你确定
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/30264) ，转载请注明来源
[https://www.javascriptcn.com/post/30264](https://www.javascriptcn.com/post/30264)