在前端开发中，弹窗是非常常见的交互组件。本文将介绍如何基于 jQuery UI 实现自定义样式的 Alert 和 Confirm 弹窗，并支持换肤。
1. 什么是 jQuery UI
jQuery UI 是一个由 jQuery 团队维护的 UI 组件库，它包含了丰富的 UI 组件和实用工具，可以快速构建美观、易用的 Web 应用程序。其中就包括了 Dialog 组件，也就是我们需要用到的弹窗组件。
2. 基本用法
以下是一个使用 jQuery UI Dialog 组件来实现 Alert 和 Confirm 弹窗的基本示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- ------------ ------ ---------------- ------------------------------------------------------------------- -------- ----------------------------------------------------------- -------- ------------------------------------------------------------------ ------- ------ -------- ----------------------------- -------- --------------------------------- ----- ----- ------ --- ----- ----------------- ------------- ---------------------- --------- -- -- ----- ------------ ------- ----- ------- ------ --- ----- ------------------- --------------- ---------------------- -------- --- --------- ------- --------- ------------------------------ - ----- ----- ------ ----------------------------------- - ------------------------------- ----------- ----- ------------- - ----------- ---------- - ------------------------------- ------- ------ ------- ------ ----- ------- ------ ------------------------------------- - --------------------------------- ----------- ----- ------------- - ----------- ---------- - ------------------------------- --------------------------------- -------- --------------- ---------- - ------------------------------- --------------------------------- ------- ------ ------- ------ ----- ---------- ------- -------
这段代码中，我们首先引入了 jQuery、jQuery UI 的脚本文件和 jQuery UI 的基础样式文件。然后在页面中添加了两个按钮来触发 Alert 和 Confirm 弹窗，并分别创建了对应的弹窗 DOM 元素。
在 JavaScript 部分，我们使用了 jQuery 的 $(document).ready() 函数来确保页面加载完成后再执行代码。在点击 Alert 或 Confirm 按钮时，分别调用了 $("#alert-dialog").dialog() 和 $("#confirm-dialog").dialog() 方法来打开对应的弹窗。其中 modal 属性指定了弹窗是模态对话框，只有关闭弹窗后才能操作页面上的其他元素；buttons 属性可以自定义按钮和对应的回调函数。
3. 自定义样式
为了实现自定义样式的弹窗，我们需要在 jQuery UI 基础样式的基础上进行修改。具体步骤如下：
- 下载并解压 jQuery UI 的源码包。
- 进入
themes目录，选择一个你喜欢的主题（比如redmond），复制整个目录到你项目的样式文件夹中。 - 打开
jquery-ui.theme.css文件，找到.ui-dialog和.ui-dialog-buttonpane两个类，并根据需要修改它们的属性值。例如，可以将弹窗背景色改为红色：.ui-dialog { background-color: #ff0000; }。
在 HTML 中引用对应的 CSS 文件即可生效，例如：
<link rel="stylesheet" href="./path/to/jquery > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/2593) ，转载请注明来源 [https://www.javascriptcn.com/post/2593](https://www.javascriptcn.com/post/2593)