iframe配合JQueryUI dialog实现登录对话框效果

先上图：



其实里面的对话框是一个iframe，不把他们做到一个页面中主要方便模块式开发，而且可以带来禁用javascript的时候也能打开编辑界面的效果（当然关闭的时候还需要处理一下）：



主要代码：把iframe显示为一个模拟对话框：

$("<iframe id='editFrame' src='EditPersonPage.aspx?action=insert' />").dialog({ autoOpen: true, modal: true, title: "新增人员" });

主界面：

<script type="text/javascript">
var insertClick = function(e) {
$("<iframe id='editFrame' src='EditPersonPage.aspx?action=insert' />").dialog({ autoOpen: true, modal: true, title: "新增人员" });
e.preventDefault();
};
var editClick = function(e) {
var editUrl = "EditPersonPage.aspx?action=edit&id=" + $(this).attr("rowid");
$("<iframe id='editFrame'/>").attr("src", editUrl).dialog({ autoOpen: true, modal: true, title: "编辑人员" });
e.preventDefault();
};
$(function() {
$("#linkInsert").click(insertClick);
$("a[action=edit]").click(editClick);
});
function CloseEditPage() {
$("#editFrame").dialog("close");
document.location.reload();
}
</script>

CloseEditPage方法是关闭对话框并且刷新，供编辑对话框调用。

编辑界面中在保存关闭以后调用父窗口的方法：window.parent.CloseEditPage()关闭编辑对话框。

protected void FormView1_ItemUpdated(object sender, FormViewUpdatedEventArgs e)
{
ClientScript.RegisterStartupScript(GetType(), "close", "window.parent.CloseEditPage();", true);
}

protected void FormView1_ItemInserted(object sender, FormViewInsertedEventArgs e)
{
ClientScript.RegisterStartupScript(GetType(), "close", "window.parent.CloseEditPage();", true);
}

这个程序在IE6、IE8、Firefox下都运行通过。

代码下载：http://files.cnblogs.com/rupeng/JQueryDlg.zip