JQuery的dialog用法总结-CSDN博客

本文详细介绍如何使用 JQuery 的 dialog 组件创建一个弹出框，包括弹出框的 HTML 结构、初始化设置及显示关闭方法。

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

[size=x-large]JQuery的dialog用法总结[/size]

[size=medium]
示例：
1. 作为弹出框的div层的脚本：[/size]


<div title="操作" id="dialog-form" class="tableForm2" style="display: none;">
		<form id="operate" width="100%">
			<table width=100% cellpadding="0" cellspacing="0" style="margin-bottom:8px">
				<td width="20%">
						提示：
					</td>
					<td id="msg" style="color: red">
						点击左边内容进行操作
					</td>
				</tr>
				<tr>
					<td>
						名称：
						<span style="color: red">*</span>
					</td>
					<td>
						<input type="text" id="aName" name="aName" maxlength="10"
						validate="notNull" desc="名称" size="40"></input>
					</td>
				</tr>
				<tr>
					<td>
						URL：
					</td>
					<td>
						<input type="text" id="aUrl" name="aUrl" size="40"></input>
					</td>
				</tr>
				<tr>
					<td>
						操作：
					</td>
					<td>
						<button type="button" onclick="ok()" style="width: 80px; height: 25px"> 确定 </button>
					</td>
				</tr>
			</table>
		</form>

		<iframe src="<%=basePath%>forms/b2BVouch/goToPage"
			 id="catFrame" height="200px"></iframe>
	</div>

[size=medium]2. 页面加载时初始化js脚本:[/size]


$(function() {
		$("#dialog-form").dialog({
			autoOpen: false,
			height: 380,
			width: 500,
			modal: true
		});	
});

[size=medium]3. 显示和关闭dialog时的方法：[/size]


$("#dialog-form").dialog("open");
$("#dialog-form").dialog("close");
$("#dialog-form").dialog("destory");

[size=medium]效果展示：[/size]