jQuery UI弹出Dialog对话框

最新推荐文章于 2025-05-04 09:25:31 发布

活最好的自己

最新推荐文章于 2025-05-04 09:25:31 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 工作日志

本文链接：https://blog.youkuaiyun.com/lz465350/article/details/42268965

工作日志同时被 2 个专栏收录

274 篇文章

订阅专栏

JQuery

45 篇文章

订阅专栏

本文详细介绍了如何使用jQuery UI中的Dialog插件来创建弹窗，并展示了如何通过点击按钮打开和关闭弹窗，设置对话框为模态等配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、参考http://www.cnblogs.com/haogj/archive/2011/02/16/1956267.html

2、$("#confirm").dialog("open");只能用在jquery dialog()不为空的情况显示dialog窗口，如：

			$(function(){
				$("#btn").unbind("click").click(function(){
					$("#confirm").dialog("open");
				});
				$("#confirm").dialog({
					autoOpen:false,
				});
			});

$("#confirm").dialog();只能在jquery dialog为空的情况下显示dialog窗口，如：

			$(function(){
				$("#btn").unbind("click").click(function(){
					$("#confirm").dialog();
				});
				$("#confirm").dialog();
			});

3、代码如下：（该jQuery UI插件见 http://download.youkuaiyun.com/detail/lz465350/8315221）

<html>
	<head>
		<script src="../../script/jquery-1.8.2.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../script/styles/jquery-ui-1.10.4.min.css" />
		<link rel="stylesheet" type="text/css" href="../../script/styles/mydialog.css" />
		<script type="text/javascript" src="../../script/ui/jquery.ui.core.js"></script>
		<script type="text/javascript" src="../../script/ui/jquery.ui.widget.js"></script>
		<script type="text/javascript" src="../../script/ui/jquery.ui.mouse.js"></script>
		<script type="text/javascript" src="../../script/ui/jquery.ui.button.js"></script>
		<script type="text/javascript" src="../../script/ui/jquery.ui.draggable.js"></script>
		<script type="text/javascript" src="../../script/ui/jquery.ui.position.js"></script>
		<script type="text/javascript" src="../../script/ui/jquery.ui.dialog.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn").unbind("click").click(function(){
					$("#confirm").dialog("open");
				});
				$("#confirm").dialog({
					autoOpen:false,
					modal:true,
					buttons:{
						"OK":function(){
							$(this).dialog("close");
						},
						"Cancel":function(){
							$(this).dialog("close");
						}
					},
					closeOnEscape:false,
					open:function(){
						alert("Alread show!");
					}
				});
			});
		</script>
	</head>
	
	<body>
		<input type="button" value="close" id="btn"/>
		<div id="confirm" style="display:none;">
			Are you sure to close?
		</div>
	</body>

</html>