注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

Jquery Dialog Iframe  

2012-10-26 16:52:31|  分类: asp.net |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

me配合JQueryUI dialog实现登录对话框效果 收藏

先上图:

 b

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

b

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

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

主界面:

    <script type="text/javascript">
        var insertClick = function(e) {
            $("<iframe id='editFrame' src='http://zxianf.blog.163.com/blog/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

  评论这张
 
阅读(1044)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017