jquery $.Dialog对话框示例代码

效果图:

源代码:

//模态窗口插件
(function ($) {
    $.Dialog = {
        option: {
            title: "dialog",
            height: "300",
            width: "500",
            modal: true,
            resizable: false,
            external: true,
            draggable: true,
            closeandreturn:false
        },
        open: function (url, dlgid, options) {
             
            var op = $.extend({}, $.Dialog.option, options);
            dlgid += new Date().getTime(); // 加入当前时间戳,建立动态ID避免ID冲突
            var tempDialog = document.getElementById(dlgid);
            if (tempDialog != undefined && tempDialog != null) {
                $dialog = $(tempDialog);
            } else {
                $body = $("body");
                $div = $("<div style='padding:0; overflow:hidden;'></div>");
                $div.attr("id", dlgid);
                $body.append($div);
                $dialog = $("#" + dlgid);
            }
            if (op.external) {
                var iframeWidth = parseInt(op.width) - 10;
                var iframeHeight = parseInt(op.height);
                iframe = $("<iframe>").attr({ "src": url, "scrolling":"auto","frameborder": "0", "marginwidth": "0", "marginheight": "0" })
                .css({ "width": iframeWidth + "px", "height": iframeHeight + "px", "margin": "5px" });
                $dialog.html(iframe);
            } else {
                //嵌入html
                alert("不支持external: false的模式");
            }
            $dialog.dialog(op);
            $dialog.height(parseInt(op.height) - $($dialog).siblings(".ui-dialog-titlebar").outerHeight());
            iframe.height(parseInt(op.height) - $($dialog).siblings(".ui-dialog-titlebar").outerHeight());
            if (op.param) $dialog.data("param", op.param);
            $dialog.data(dlgid + "callback", options.callback);
            $("body").data(dlgid, $dialog);
            var iframeObj = $("#" + dlgid + " iframe").get(0).contentWindow;
            //在iframe的页面中创建window.dialogVal方法,在iframe中使用window.dialogVal()取得传递的参数
            iframeObj.dialogVal = function () {
                if ($dialog.data("param") != undefined && $dialog.data("param") != null) {
                    return $dialog.data("param");
                } else {
                    return "";
                }
            }
            //在iframe的页面中创建window.closeDialog方法,在iframe中使用window.closeDialog()关闭窗口
            iframeObj.closeDialog = function () {
                $.Dialog.close(dlgid);
            }
            //在iframe的页面中创建window.closeDialogAndReturn方法,
            //在iframe中使用window.closeDialogAndReturn(returnValue)关闭窗口并返回参数,returnValue为返回的参数
            iframeObj.closeDialogAndReturn = function (returnValue) {
                $.Dialog.closeAndReturnVal(dlgid, returnValue);
            }
            //除去原有的关闭事件并绑定自定义关闭动作
            $("#" + dlgid).siblings(".ui-dialog-titlebar").find(".ui-dialog-titlebar-close").unbind().bind("click", function () {
//                alert(options.closeandreturn);
//                if(options.closeandreturn)
//                 $.Dialog.closeAndReturnVal(dlgid, "ok");
//                 else
                $.Dialog.close(dlgid);
            });
            $("#" + dlgid).siblings(".ui-dialog-titlebar").find(".ui-dialog-titlebar-close").attr("href", "javascript:void(0)");
        },
        //关闭dialog
        close: function (dialog) {
            if (typeof dialog == 'string') {
                dialog = $("body").data(dialog);
            }
            if (dialog == undefined || dialog == null) {
                dialog = $("#" + dialog);
            }
            $("iframe", dialog).remove();
            dialog.dialog("close");
            dialog.parent().remove();  //移除新建的窗口
            dialog.remove();
        },
        //关闭dialog并执行返回函数
        closeAndReturnVal: function (dlgid, returnValue) {
            var dialog = dlgid;
            if (typeof dialog == 'string') {
                dialog = $("body").data(dialog);
            }
            if (dialog == undefined || dialog == null) {
                dialog = $("#" + dialog);
            }
            if ($(dialog).data(dlgid + "callback") != null) {
                $(dialog).data(dlgid + "callback").apply(this, [returnValue]);  //执行回调函数并返回value,value可自行定义,在回调函数中自行操作
            }
            $.Dialog.close(dialog);
        }
    };
})(jQuery);

调用方法:

function OpenCompany(id, flag) {
    var agentid = requestparm('agentid');
    if (flag == 1) {
        url = "CompanyAdd.aspx?operate=edit&companyid=" + id;
    }
    else if (flag == 2) {
        url = "CompanyAdd.aspx?operate=view&companyid=" + id;
    }
    else {
        url = "CompanyAdd.aspx?agentid=" + agentid + "&operate=add";
        //url = "CompanyAdd.aspx?operate=add";
    }
    var dlgid = "dialog" + id;
    var options = {};
    if (flag == 1) {
        options.title = "编辑商家";
    }
    else if (flag == 2) {
        options.title = "商家详情";
    }
    else {
        options.title = "新增商家";
    }
    options.width = "550";
    options.height = "530";
    options.callback = function (data) {
        ManageCompanyInfo(0);
    };
    $.Dialog.open(url, dlgid, options);
}

时间: 2024-09-21 05:19:04

jquery $.Dialog对话框示例代码的相关文章

Android UI系列-----Dialog对话框示例

在Android开发当中,在界面上弹出一个Dialog对话框使我们经常需要做的,本篇随笔将详细的讲解Dialog对话框这个概念,包括定义不同样式的对话框. 一.Dialog 我们首先来看看android官方文档对Dialog的介绍 A dialog is a small window that prompts the user to make a decision or enter additional information. A dialog does not fill the screen

Android实现自定义圆角对话框Dialog的示例代码

前言: 项目中多处用到对话框,用系统对话框太难看,就自己写一个自定义对话框. 对话框包括:1.圆角 2.app图标 , 提示文本,关闭对话框的"确定"按钮 难点:1.对话框边框圆角显示 2.考虑到提示文本字数不确定,在不影响美观的情况下,需要在一行内显示提示的文字信息 3.设置对话框的宽和高 技术储备: 1.安卓开发_使用AlertDialog实现对话框    知道AlertDialog有setView(view) ,Dialog 有ContentView(view) 方法. 2.An

利用javascript打开模态对话框(示例代码)_javascript技巧

1. 标准的方法 复制代码 代码如下: <script type="text/javascript">   function openWin(src, width, height, showScroll){   window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+heig

Android 对话框(Dialog)大全详解及示例代码_Android

Activities提供了一种方便管理的创建.保存.回复的对话框机制,例如 onCreateDialog(int), onPrepareDialog(int, Dialog), showDialog(int), dismissDialog(int)等方法,如果使用这些方法的话,Activity将通过getOwnerActivity()方法返回该Activity管理的对话框(dialog). onCreateDialog(int):当你使用这个回调函数时,Android系统会有效的设置这个Acti

Android Dialog 对话框详解及示例代码_Android

Android Dialog 对话框 1.Dialog介绍 2.AlertDialog的基本使用 3.自定义对话框 Custom Dialog 一.Dialog介绍 Dialog也是Android中常用的用户界面元素,他同Menu一样也不是View的子类.让我们看一下它的继承关系: 这里要留意一下他的直接子类 AlertDialog,和间接子类 DatePickerDialog,ProgressDialog,TimePickerDialog,其中后三个我们在前面的章节已经讲过,今天我们把重点放在

Android中自定义对话框(Dialog)的实例代码_Android

1.修改系统默认的Dialog样式(风格.主题) 2.自定义Dialog布局文件 3.可以自己封装一个类,继承自Dialog或者直接使用Dialog类来实现,为了方便以后重复使用,建议自己封装一个Dialog类  第一步: 我们知道Android定义个控件或View的样式都是通过定义其style来实现的,查看Android框架中的主题文件,在源码中的路径:/frameworks/base/core/res/res/values/themes.xml,我们可以看到,Android为Dialog定义

Android中自定义对话框(Dialog)的实例代码

1.修改系统默认的Dialog样式(风格.主题) 2.自定义Dialog布局文件 3.可以自己封装一个类,继承自Dialog或者直接使用Dialog类来实现,为了方便以后重复使用,建议自己封装一个Dialog类 第一步: 我们知道Android定义个控件或View的样式都是通过定义其style来实现的,查看Android框架中的主题文件,在源码中的路径:/frameworks/base/core/res/res/values/themes.xml,我们可以看到,Android为Dialog定义了

jquery ui对话框实例代码_jquery

目前JqueryUI提供的对话框支持使用相对比较的方便,示例代码如下所示: 复制代码 代码如下: <body>    <form id="form1" runat="server">     <div id="dlg">         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

Android如何自定义升级对话框示例详解

前言 本文主要给大家介绍了关于Android自定义升级对话框的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 实现的效果如下所示 其实这也只是一个DialogFragment 而已,重点只是在于界面的设计 想要使用做出这样一个DialogFragment ,需要自定义一个View,然后将该View传入到该Dialog中 先定义布局,一个TextView用于标题,一个TextView用于升级内容阐述,一个ImageView,一个确认升级的按钮 <?xml version