JQuery Dialog: Don't disable the background

Question

I've seen examples of JQuery dialog used with the select2 plugin, where you can still access the drop down box while the dialog is open.

I'm trying to do the same thing for a modal that's in a table with about 100 rows.

It's like this:

<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);
         }
    });
});

Answer 1

Set modal to false if you don't want your dialog to be modal ;-)

By definition, a modal dialog prevents interaction with other components.