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

转载 2013年12月05日 08:33:15

先上图:

 b

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

b

主要代码:把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);
        }

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

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

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

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

JQueryUI dialog实现登录对话框效果

$("").dialog({ autoOpen: true, modal: true, title: "新增人员" });     var insertClick = function(e) { ...
  • qiume
  • qiume
  • 2012年01月06日 17:01
  • 2593

jquery 对话框(Dialog)插件

jQuery 对话框(Dialog) - 模态
  • z991876960
  • z991876960
  • 2016年09月22日 12:57
  • 2131

一个简单的Web模式对话框

模式对话框 function showDialog(){ $('#bodyHide').show(); //显示在屏幕中间 $('#di...
  • zhangzeyuaaa
  • zhangzeyuaaa
  • 2015年05月05日 15:34
  • 2391

模式对话框PopupWindow实现Dialog的功能

Popupwindow作为与Dialog有同等功能的对话框,Popupwindow现在完全实现Dialog的功能,背景变灰...
  • dreamInTheWorld
  • dreamInTheWorld
  • 2014年11月17日 13:45
  • 2343

Android简单的自定义用户登陆对话框

一、运行测试效果 二、涉及到的基本组件和原理 1、基本组件:AndroidUI、View、TextView、EditText、Button、CheckBox、动画Animation、线程Thr...
  • oFanJunBin
  • oFanJunBin
  • 2014年06月11日 22:31
  • 2078

jQuery UI全教程之一(dialog的使用教程)

[html] view plaincopy    jQuery UI目前的版本已经更新到了1.8.7。个人感觉和easyui相比起来,jQuery UI在界面的...
  • u012889638
  • u012889638
  • 2014年08月27日 10:41
  • 3350

jQuery 对话框(dialog)显示在屏幕中央

jQuery 实现元素显示在屏幕中央,jQuery 将对话框显示在屏幕中央,jQuery 图像显示在屏幕中央,我们经常需要将对话框显示在屏幕的中央,如果使用 Javascript ,因为浏览器实现的差...
  • lhooouuu
  • lhooouuu
  • 2011年07月15日 08:12
  • 7612

Android在对话框中实现登录与注册

在android的应用中越来越多的包含了网络互动功能,这就带来了注册,登陆账号功能。本文完整的介绍对话框的方式实现用户登陆功能。 登陆效果: 应用程序判断当前用户还未登陆,弹出登陆对话框,用户输入账...
  • rongwenbin
  • rongwenbin
  • 2014年10月09日 11:15
  • 351
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:me配合JQueryUI dialog实现登录对话框效果
举报原因:
原因补充:

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