调用jquery UI生成一个对话框

简述：

简单实用Jquery生成一个对话框（备忘）

步骤：

1. 导入JqueryUI的js库

2. 声明一个对话框，设置display为none隐藏

<!-- 预览窗口 -->
<div id="previewDialog" title="预览" style="display: none;">
	<table id="tablePreview" width="360" border="0"  align="center" cellspacing="0" cellpadding="0">
		<tr>
			<td width="20%" align="left"><b>名称</b></td>
			<td width="80%" name="activityName" align="left"></td>
		</tr>
		<tr>
			<td><b>发布账号: </b></td>
			<td name="activityIssuer"></td>
		</tr>		
		<tr>
			<td><b>说明: </b></td>
			<td name="activityDescription"></td>
		</tr>
		<tr>
			<td><b>生效时间: </b></td>
			<td name="activityStartDate"></td>
		</tr>
		<tr>
			<td><b>结束时间: </b></td>
			<td name="activityEndDate"></td>
		</tr>
	</table>
</div>

3. 声明对话框UI

 /**
 * 预览活动
 */
 function previewActivity(){
 	$( "#previewDialog" ).dialog({
		  dialogClass: "no-close",
		  width: "400",
		  height: "350",
		  buttons: [
		    {
		      text: "关闭",
		      click: function() {
		        $( this ).dialog( "close" );
		      }
		    }
		  ]
    });
	$("#tablePreview td[name='activityName']").text($("input[name='txtActivityName']").val());
	$("#tablePreview td[name='activityIssuer']").text("上传人");
	$("#tablePreview td[name='activityDescription']").text($("textarea[name='txtActivityDescription']").val());
	$("#tablePreview td[name='activityStartDate']").text($("input[name='txtStartDate']").val());
	$("#tablePreview td[name='activityEndDate']").text($("input[name='txtEndDate']").val());
 }

4. 添加点击事件

<div><a href="javascript:previewActivity()" >预览</a>

效果：