c# ui菜单 ui使用 - 带有ASP.NET按钮回发的jQuery UI对话框




9 Answers

你接近解决方案,只是得到错误的对象。 它应该是这样的:

jQuery(function() {
    var dlg = jQuery("#dialog").dialog({
                         draggable: true,
                         resizable: true,
                         show: 'Transfer',
                         hide: 'Transfer',
                         width: 320,
                         autoOpen: false,
                         minHeight: 10,
                         minwidth: 10
                     });
    dlg.parent().appendTo(jQuery("form:first"));
});
ui教程 ui下载

我有一个jQuery UI对话框在我的ASP.NET页面上工作得很好:

jQuery(function() {
    jQuery("#dialog").dialog({
        draggable: true,
        resizable: true,
        show: 'Transfer',
        hide: 'Transfer',
        width: 320,
        autoOpen: false,
        minHeight: 10,
        minwidth: 10
    });
});

jQuery(document).ready(function() {
    jQuery("#button_id").click(function(e) {
        jQuery('#dialog').dialog('option', 'position', [e.pageX + 10, e.pageY + 10]);
        jQuery('#dialog').dialog('open');
    });
});

我的div:

<div id="dialog" style="text-align: left;display: none;">
    <asp:Button ID="btnButton" runat="server" Text="Button" onclick="btnButton_Click" />
</div>

但是btnButton_Click永远不会被调用......我该如何解决这个问题?

更多信息:我添加了此代码以将div移动到窗体:

jQuery("#dialog").parent().appendTo(jQuery("form:first"));

但仍然没有成功...







ken的上面的答案为我做了诀窍。 被接受的答案的问题在于,只有在页面上有单个模式时才有效。 如果你有多个模式,你需要在初始化对话框的时候在“打开”参数中内联,而不是事后。

open: function(type,data) { $(this).parent().appendTo("form"); }

如果你按照第一个被接受的答案告诉你多个模态,你只会得到页面上的最后一个模式,而不是所有的模式。




我不想为我的项目中的每个对话框都解决这个问题,所以我创建了一个简单的jQuery插件。 该插件仅用于打开新的对话框并将它们放置在ASP.NET窗体中:

(function($) {
    /**
     * This is a simple jQuery plugin that works with the jQuery UI
     * dialog. This plugin makes the jQuery UI dialog append to the
     * first form on the page (i.e. the asp.net form) so that
     * forms in the dialog will post back to the server.
     *
     * This plugin is merely used to open dialogs. Use the normal
     * $.fn.dialog() function to close dialogs programatically.
     */
    $.fn.aspdialog = function() {
        if (typeof $.fn.dialog !== "function")
            return;

        var dlg = {};

        if ( (arguments.length == 0)
                || (arguments[0] instanceof String) ) {
            // If we just want to open it without any options
            // we do it this way.
            dlg = this.dialog({ "autoOpen": false });
            dlg.parent().appendTo('form:first');
            dlg.dialog('open');
        }
        else {
            var options = arguments[0];
            options.autoOpen = false;
            options.bgiframe = true;

            dlg = this.dialog(options);
            dlg.parent().appendTo('form:first');
            dlg.dialog('open');
        }
    };
})(jQuery);</code></pre>

所以要使用插件,你首先加载jQuery UI,然后加载插件。 然后你可以做如下的事情:

$('#myDialog1').aspdialog(); // Simple
$('#myDialog2').aspdialog('open'); // The same thing
$('#myDialog3').aspdialog({title: "My Dialog", width: 320, height: 240}); // With options!

为了清楚起见,这个插件假设你已经准备好在你打电话时显示对话框。




我知道这是一个老问题,但对于任何有同样问题的人来说,有一个更新,更简单的解决方案:在jQuery UI 1.10.0中引入了“appendTo”选项

appendTo

$("#dialog").dialog({
    appendTo: "form"
    ....
});



这对我来说是最清楚的解决方案

var dlg2 = $('#dialog2').dialog({
        position: "center",
        autoOpen: false,
        width: 600,
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });

dlg2.parent().appendTo('form:first');
$('#dialog_link2').click(function(){
    dlg2.dialog('open');

dlg2所有内容都可以插入到数据库中。 不要忘记改变dialog变量来匹配你的。




罗伯特麦克莱恩拥有最高票数的解决方案是99%正确的。 但是,像我一样,唯一需要添加的人可能需要打开此jQuery对话框,不要忘记将其附加到父项。 如下所示:

var dlg = $('#questionPopup').dialog( 'open'); dlg.parent().appendTo($("form:first"));




$('#dialog').parent().appendTo($("form:first"))解决方案在IE 9中工作正常。但是在IE 8中,它使对话框直接出现并消失。 除非您放置一些警报,否则看不到该对话框。 我花了一个上午的时间找到了适用于这两个版本的解决方案,唯一能同时适用于版本8和9的解决方案是:

$(".ui-dialog").prependTo("form");

希望这可以帮助那些同样问题困扰的人




确切的解决方案是;

$("#dialogDiv").dialog({ other options...,
    open: function (type, data) {
        $(this).parent().appendTo("form");
    }
});



Related