JQuery对话框:Don';不要禁用背景

JQuery对话框:Don';不要禁用背景,jquery,angularjs,jquery-ui,jquery-dialog,Jquery,Angularjs,Jquery Ui,Jquery Dialog,我已经看到了与select2插件一起使用JQuery对话框的例子,在对话框打开时,您仍然可以访问下拉框 我尝试对一个模态做同样的事情,它位于一个大约有100行的表中 是这样的: <table> <tr ng-data-repeat="inst in instances" <td>data bind 1</td> <td><a href="javascript:void(0)" class="genpopover

我已经看到了与select2插件一起使用JQuery对话框的例子,在对话框打开时,您仍然可以访问下拉框

我尝试对一个模态做同样的事情,它位于一个大约有100行的表中

是这样的:

<table>
   <tr ng-data-repeat="inst in instances"
     <td>data bind 1</td>
     <td><a href="javascript:void(0)" class="genpopover">click to open dialog</a></td>
   </tr>
   <tr>
     <td>
        <div id="modal"></div>
     </td>
   </tr>

$('body').on("click", ".genpopover", function(){
    var $elm = $(this);
    var $tbl = $elm.parent().parent().parent().parent();
    $("#modal").dialog({  //create dialog, but keep it closed
        autoOpen: false,
        height: 300,
        width: 500,
        modal: true,
        draggable: false,
        position: {  my: "right center", at: "right top", of: $tbl},
        open: function () {
               if ($.ui && $.ui.dialog && !$.ui.dialog.prototype._allowInteractionRemapped && $(this).closest(".ui-dialog").length) {
                     if ($.ui.dialog.prototype._allowInteraction) {
                            $.ui.dialog.prototype._allowInteraction = function (e) {
                                   if ($(e.target).closest('table').length) return true;
                     return ui_dialog_interaction.apply(this, arguments);
                 };
                 $.ui.dialog.prototype._allowInteractionRemapped = true;
                }
                  else {
                      $.error("You must upgrade jQuery UI or else.");
                }
           }
        },
        _allowInteraction: function (event) {
            return !!$(event.target).is("table") || this._super(event);
         }
    });
});

如果不希望对话框为模态,请将模态设置为false;-)

根据定义,模态对话框可防止与其他组件的交互

根据定义,模式对话框阻止所有其他UI交互。如果你想在对话框打开时做一些事情,不要使用模态对话框。