JQuery的dialog用法总结

JQuery的dialog用法总结


示例：
1. 作为弹出框的div层的脚本：

<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">&nbsp;确定&nbsp;</button>
					</td>
				</tr>
			</table>
		</form>

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

2. 页面加载时初始化js脚本:

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

3. 显示和关闭dialog时的方法：

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

效果展示：