📌  相关文章
📜  模态上的jquery对话框模态 - Javascript(1)

📅  最后修改于: 2023-12-03 14:55:52.778000             🧑  作者: Mango

模态上的jquery对话框模态 - Javascript

介绍

模态上的jquery对话框模态是一个非常方便的javascript工具，可以通过使用jQuery UI主题来创建自定义对话框。它使用了jQuery UI中的可移动、可缩放和可关闭的对话框部件，并通过添加自定义选项来增强功能。

此工具提供了几个强大的功能，使您可以快速轻松地创建自定义对话框，包括：

  • 可以自定义标题和消息。
  • 您可以添加按钮，以便进行操作。
  • 您可以设置对话框的大小和位置。
  • 您可以在对话框内添加表格、表格行和表格列。
示例

以下示例演示如何使用模态上的jquery对话框模态。首先，您需要包含jQuery、jQuery UI和模态上的jquery对话框模态文件。

<head>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
	<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
	<script src="https://cdn.jsdelivr.net/npm/jquery-modal-dialog/jquery.modal-dialog.js"></script>
	<link href="https://cdn.jsdelivr.net/npm/jquery-modal-dialog/jquery.modal-dialog.css" rel="stylesheet" />
</head>

接下来，您可以创建对话框的HTML代码。以下示例代码定义了一个名称为“dialog-confirm”的对话框，其中包含一个标题和一个消息。

<div id="dialog-confirm" title="Delete Confirmation">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure you want to delete this item?</p>
</div>

最后，您可以使用以下代码来创建对话框：

$("#dialog-confirm").dialog({
	resizable: false,
	height: "auto",
	width: 400,
	modal: true,
	buttons: {
		"Delete item": function () {
			$(this).dialog("close");
		},
		Cancel: function () {
			$(this).dialog("close");
		}
	}
});

此代码将创建一个名为“dialog-confirm”的对话框，其标题为“Delete Confirmation”，并显示消息“Are you sure you want to delete this item?”。此对话框不允许调整大小，其高度为“自动”，宽度为“400”，并且是模态对话框。它包含两个按钮，分别是“Delete item”和“Cancel”，并在用户单击其中一个按钮时自动关闭。

结论

模态上的jquery对话框模态是一种非常有用的javascript工具，可以使您轻松创建自定义对话框。无论您是需要创建警告框、确认框或其他类型的对话框，此工具都可以轻松满足您的需要。