详细分析jQuery对话框的用法

今天，我们使用客户端对话框学习jQuery对话框中的对话框。

准备jQuery环境

首先，我们创建一个按钮，当你点击按钮时，弹出一个对话框。
为了设置这个按钮单击事件，需要准备jQuery环境。
按钮的单击事件被设置为就绪。
复制代码代码如下所示：
$（函数（）{（））
初始化
$（# BTN）。Click（function（）{）
警报（按钮被点击！；
}
）；

确认这一步没有问题。

准备对话框
其次，您需要准备对话框的内容。这些内容来自jQuery的演示文件。
复制代码代码如下所示：
这些项目将被永久删除，无法收回。你是吗
为了使用jQuery对话框，您需要增加这些文件的引用。

添加样式
jQuery UI使用了很多风格的装修，需要注意引用jQuery UI的风格，jquery.ui.all.css，这个文件是指其他风格的大量文献，对 发展束主题基础文件夹的内容复制在jQuery UI。
在就绪函数中，对话框也被初始化。
复制代码代码如下所示：
$（函数（）{（））
初始化
$（# BTN）。Click（function（）{）
警报（按钮被点击！；
}）；

初始化对话框
$（#对话框确认对话框（））；
}）；

现在，当您打开页面时，您可以看到对话框。

通过按钮弹出对话框
我们希望对话框在初始化页面时看不见，点击按钮后会出现，所以我们需要这些工作。

添加一个默认的样式对话框第一。风格=显示：无
复制代码代码如下所示：
这些项目将被永久删除，无法收回。你是吗
然后，当对话框初始化时，它不显示，只完成初始化工作。

当对话框的初始化、参数传递错误自动打开：
复制代码代码如下所示：
$（#对话框确认对话框（）。
{
AutoOpen：假
}
）；

在按钮的单击事件中，弹出对话框。
复制代码代码如下所示：
$（# BTN）。Click（function（）{）
/ / 按钮被单击警报（！；
$（#对话框确认）。对话框（开放）；
}）；

如果关闭，则对话框将关闭。

实现模式对话框
在实际应用中，常常需要实现模式对话框。在Web中，我们需要添加一个屏蔽层来阻止底层元素并模拟模式效果。这可以通过在初始化对话框时传递一个参数模式true来实现。修改后的初始化代码变成了：
复制代码代码如下所示：
$（#对话框确认对话框（）。
{
模式：真的，创建一个模态对话框。
AutoOpen：假， / /只初始化，显示
}
）；

添加对话框的按钮
你可以在对话框中添加任何按钮，自定义按钮的事件处理。我们首先添加两个按钮，一个确定，一个取消，然后让他们先关闭对话框。
复制代码代码如下所示：
初始化对话框
$（#对话框确认对话框（）。
{
模式：真的，创建一个模态对话框。
假自动打开，
按钮：{
OK：函数（）{
$（这）对话框（'关闭'）；
}，
取消：函数（）{
$（这）对话框（'关闭'）；
}
}
}）；