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的时候也能打开编辑界面的效果(当然关闭的时候还需要处理一下): 主要代码:把i...
  • cownew
  • cownew
  • 2011年01月15日 16:47
  • 2111

用JqueryUI的Dialog+IFrame实现仿模态窗口效果

大家有没有想过这样一个问题,当我点击某个图片的时候,我想弹出这个图片信息的详情并修改,于是你首先想到的是不是window.open?window.open方法确实可以,但是有它的局限性,比如,标题显示...

JqueryUI插件dialog实现遮罩的效果

JqueryUI插件dialog实现遮罩的效果 通过简单的学习了JqueryUI插件的一些内容,对于dialog对话框效果我们也有了一些简单的了解。那么,我来给大家介绍一下使用jqueryUI di...

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

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

自定义Dialog对话框并实现从底部弹出的动画效果

package com.example.paydemo; import android.app.Activity; import android.app.AlertDialog; import and...

使用JQueryUI + FreeMarker 实现Div动态DIalog添加和删除

 html> http-equiv="Content-Type" content="text/html; charset=utf-8"> http-equiv="Co...
  • luoyali
  • luoyali
  • 2015年05月27日 16:49
  • 1568

对话框dialog登录之后,Jquery实现页面定时跳转

/js/jquery-1.7.2.min.js">

thinkphp 无刷新上传头像 有dialog弹出层对话框效果 有水印功能

运用的是jquery中的插件,温馨提示请下载好js。 适友注册       // increase the default animatio...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:me配合JQueryUI dialog实现登录对话框效果
举报原因:
原因补充:

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