jQuery UI Dialog 是一个基于 jQuery UI 库的用户界面插件,用于创建模态对话框或非模态对话框,它允许用户在不离开当前页面的情况下与内容进行交互,以下是使用 jQuery UI Dialog 的详细步骤和示例代码:
(图片来源网络,侵删)
1、引入 jQuery 和 jQuery UI 库文件
在使用 jQuery UI Dialog 之前,需要先引入 jQuery 和 jQuery UI 的库文件,可以通过以下方式引入:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>jQuery UI Dialog 示例</title> <!引入 jQuery > <script src="https://code.jquery.com/jquery3.6.0.min.js"></script> <!引入 jQuery UI > <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jqueryui.css"> <script src="https://code.jquery.com/ui/1.12.1/jqueryui.js"></script></head><body> <!页面内容 ></body></html>
2、创建一个按钮和一个隐藏的对话框容器
在页面中创建一个按钮,用于触发对话框的显示,创建一个包含对话框内容的隐藏容器:
<!按钮 ><button id="openDialog">打开对话框</button><!对话框容器 ><p id="dialog" title="对话框标题" style="display:none;"> <p>这是一个对话框的内容。</p></p>
3、使用 jQuery 初始化 Dialog
在页面加载完成后,使用 jQuery 为按钮添加点击事件,并在点击事件中使用 dialog()
方法初始化 Dialog:
<script>$(document).ready(function() { // 初始化 Dialog $("#dialog").dialog({ autoOpen: false, // 默认不显示对话框 modal: true, // 设置为模态对话框 buttons: { "确认": function() { $(this).dialog("close"); // 关闭对话框 }, "取消": function() { $(this).dialog("close"); // 关闭对话框 } } }); // 为按钮添加点击事件 $("#openDialog").click(function() { $("#dialog").dialog("open"); // 打开对话框 });});</script>
4、运行示例
将以上代码整合到一个 HTML 文件中,然后在浏览器中打开该文件,点击“打开对话框”按钮,即可看到弹出的对话框,在对话框中点击“确认”或“取消”按钮,对话框会关闭。
以上就是使用 jQuery UI Dialog 的详细步骤和示例代码,通过引入 jQuery 和 jQuery UI 库文件,创建按钮和隐藏的对话框容器,然后使用 jQuery 初始化 Dialog 并为其添加事件,即可实现对话框的显示和关闭功能。
下一篇:云电脑无影售价