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

原创 2011年01月15日 16:47:00

先上图:

其实里面的对话框是一个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

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

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

jquery里的dialog对话框插件为框架页(iframe) 的方法

(function ($) { $.fn.openWidow = function (options) { var divId = "dialog" + Math.round(...
  • zhangfeng1133
  • zhangfeng1133
  • 2015年08月02日 09:56
  • 1854

Qt 登录对话框显示

今天我们来讲一讲Qt中对话框的使用,通过本篇博客你会学会如何编写一个简单的对话框,我们以最常见的登录对话框为例。       首先,要强调的是,QDialog是所有Qt对话框窗口的基类,它继承自QW...
  • Jaster_wisdom
  • Jaster_wisdom
  • 2017年01月12日 13:36
  • 683

jquery用ajax取得数据的dialog对话框

1.usermanage.jsp /* 查看用户信息 */ //对话框样式可以去网上找找,也可以去改jquery的源码      $('#dialogSelect').dialog({  ...
  • u010135963
  • u010135963
  • 2013年11月06日 16:09
  • 1526

Android UI设计之<七>自定义Dialog,实现各种风格效果的对话框

虽然Android给我们提供了众多组件,但是使用起来都不是很方便,我们开发的APK都有自己的风格,如果使用了系统自带的组件,总是觉得和应用的主题不着边际并且看起来也不顺心,那我们就需要自定义了,为了方...
  • llew2011
  • llew2011
  • 2014年07月08日 20:23
  • 2492

Android 毛玻璃效果对话框

一个popwindow,在弹出的时候背景是原界面的截图加高斯模糊效果 先给出popwindow的布局文件 ...
  • lvshaorong
  • lvshaorong
  • 2015年12月24日 08:56
  • 2213

Android使用Activity用作弹出式对话框Dialog

转载请表明出处:http://blog.csdn.net/lmj623565791/article/details/23116115 Android中可用于实现对话框的有Dialog,Popup...
  • jdsjlzx
  • jdsjlzx
  • 2015年04月06日 12:56
  • 1758

Qt登录对话框

转自:http://www.qter.org/portal.php?mod=view&aid=29 一、使用设计模式创建界面 1.新建Qt Widgets Application,项目名称为...
  • daaikuaichuan
  • daaikuaichuan
  • 2017年04月08日 20:37
  • 1179

AndroidUI之三分钟教你实现效果简单大气的Dialog提示框

在项目当中不可以避免会使用一些自定义的提示框,如下图所示: 个人感觉这个还不错,,,全屏显示,,, 下面,让我们一起学习,如何实现当前效果。。。实现思路如下: 1. 首先自定义一个dialog类...
  • u012400885
  • u012400885
  • 2016年04月19日 15:17
  • 621

纯css3实现漂亮的对话框----Day07

姑且先不来讨论css3跟css的区别,也不说html和html5的不同,u
  • marSmile_tbo
  • marSmile_tbo
  • 2014年05月15日 23:09
  • 2550
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iframe配合JQueryUI dialog实现登录对话框效果
举报原因:
原因补充:

(最多只允许输入30个字)