在前端开发中，常常需要使用到确认框来获取用户的确认信息。jQuery UI为我们提供了一个现成的UI组件jquery.ui.dialog，可以用来创建自定义的对话框。本文将介绍如何使用这个组件来创建一个自定义的confirm确认框，并提供示例代码。
1. 引入jQuery UI库
首先，在HTML页面中引入jQuery和jQuery UI库，可以从官网下载或者使用CDN方式引入。例如：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
2. 创建对话框
使用jquery.ui.dialog组件可以方便地创建对话框，可以通过以下代码创建一个最基本的对话框：
-- -------------------- ---- -------
-------------------
------ -----
------ -----
-------- -
----- ---------- -
-- ----------
--
----- ---------- -
-- ----------
------------------------
-
-
---上述代码创建了一个标题为‘确认’的对话框，其中包含两个按钮‘确认’和‘取消’。当点击‘确认’按钮时，会执行确认按钮事件处理逻辑代码块中的逻辑；当点击‘取消’按钮时，会执行取消按钮事件处理逻辑代码块中的逻辑，并关闭对话框。
3. 自定义对话框内容
可以通过在对话框中插入自定义的HTML元素，来实现自定义对话框内容。例如，以下代码创建了一个包含自定义提示信息和确认按钮的对话框：
-- -------------------- ---- -------
---------------------------
---------
------ -----
------ -----
-------- -
----- ---------- -
-- ----------
--
----- ---------- -
-- ----------
------------------------
-
-
---4. 完整示例代码
下面是一个完整的示例代码，其中创建了一个带有提示信息、确认按钮和取消按钮的自定义confirm确认框：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------------------------
----- ---------------- -------------------------------------------------------------------
------- -----------------------------------------------------------
------- ------------------------------------------------------------------
--------
------------ -
----------------------------- -
---------------------------
---------
------ -----
------ -----
-------- -
----- ---------- -
-- ----------
---------------
------------------------
--
----- ---------- -
-- ----------
------------------------
-
-
---
---
---
---------
-------
------
------- -----------------------
-------
-------通过以上代码，我们可以创建一个自定义的confirm确认框，并实现自定义的确认逻辑。同时，该方法具有一定的学习和指导意义，可以帮助开发者更好地了解jQuery UI插件的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2461