当前位置:编程学习 > JS >>

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

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

 

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

 $("<iframe id='editframe' src='editpersonpage.asp教程x?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.registerstartups教程cript(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下都运行通过。

补充:网页制作,jquery 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,