我有一个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"));

但还是没有成功……


当前回答

我不想在我的项目中的每个对话框都要解决这个问题,所以我创建了一个简单的jQuery插件。这个插件仅仅用于打开新的对话框并将它们放入ASP中。净形式:

(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!

需要明确的是,这个插件假定你已经准备好在调用它时显示对话框。

其他回答

在使用modal:true选项时,使用这一行来实现此工作。

open: function (type, data) { 
    $('.ui-widget-overlay').appendTo("form"); $(this).parent().appendTo("form"); 
  },

Robert MacLean给出的答案有99%的正确率。但是,像我这样的人可能需要添加的唯一内容是,每当需要打开这个jQuery对话框时,不要忘记将它附加到parent。像下图:

var dlg = $('#questionPopup')。对话框(“开放”); dlg.parent () .appendTo($(“形式:第一”));

我不想在我的项目中的每个对话框都要解决这个问题,所以我创建了一个简单的jQuery插件。这个插件仅仅用于打开新的对话框并将它们放入ASP中。净形式:

(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!

需要明确的是,这个插件假定你已经准备好在调用它时显示对话框。

$('#dialog').parent(). appendto ($("form:first"))解决方案在IE 9中正常工作。但是在ie8中,它可以让对话框直接出现和消失。你不能看到这个,除非你放置一些警告,这样对话框似乎永远不会出现。 我花了一个上午的时间找到了一个在两个版本都适用的解决方案,而在版本8和9上都适用的唯一解决方案是:

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

希望这能帮助其他有同样问题的人

顺便说一句,第一个技巧对我没用。

然而,那篇博客文章中的技巧做到了:

http://blog.roonga.com.au/2009/07/using-jquery-ui-dialog-with-aspnet-and.html

具体来说,将这个添加到对话框声明中:

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