Question

如果我像这样初始化我的模态：

$("#dlg").dialog({
    open: function (e) {
        $(this).load('mvc action url');
    },
    close: function () {
        $(this).dialog('destroy').empty();
    },
    modal: true
});

...它初始化为模态。但是，如果我在初始化时遗漏modal: true并尝试在对话框已经打开后设置模态，那么：

$("#dlg").dialog("option", "modal", true);

......它不起作用。我知道它已被设置，因为我可以在设置后提醒模态值。我也正在引用jquery-ui的库，因为我可以在初始化时将其作为模态打开。

修改

这是一个小提琴：

http://jsfiddle.net/s9zmfkdn/1/

最初点击打开时，它会显示为预期的模态。现在，当我在小提琴中指示时删除该行。这次打开对话框然后单击 Make it modal 时，没有任何反应

Answer 1

因此，有一些因素导致其无法按预期工作。

您将对话框的初始化包装在一个函数中，因此其他函数无法全局使用。
您在关闭时销毁对话框，因此不再允许更改modal选项。

不清楚为什么你这样做，我怀疑你有什么东西不能分享。无论如何，这是一个有效的例子：

http://jsfiddle.net/Twisty/s9zmfkdn/2/

<强> HTML

<div id="basesystem" title="whatever" style="display:none"></div>
<input type="button" class="moduleloader" value="Open" />

<input id="makemodal" type="button" value="Remove Modal" />

<强>的JavaScript

$(function() {
  $("#basesystem").dialog({
    open: function(e) {
      $(this).html('<span>hello</span>');
    },
    close: function() {
      $(this).empty();
    },
    modal: true,
    autoOpen: false
  });

  $("#makemodal").click(function() {
    if ($("#basesystem").dialog("option", "modal")) {
      $("#basesystem").dialog("option", "modal", false);
      $(this).val("Make Modal");
    } else {
      $("#basesystem").dialog("option", "modal", true);
      $(this).val("Remove Modal");
    }
  });

  $(".moduleloader").click(function() {
    $("#basesystem").dialog("open");
  });
});

现在，如果需要，您可以更全面地定义对象并按照以下方式对其进行操作：

http://jsfiddle.net/Twisty/s9zmfkdn/4/

<强> HTML

<div id="basesystem" title="whatever" style="display:none"></div>
<input type="button" class="moduleloader" value="Open" />

<input id="makemodal" type="button" value="Remove Modal" data-modal="true" />

<强>的JavaScript

$(function() {
  var $diag = $("#basesystem");
  $(".moduleloader").click(function() {
    $diag.dialog({
      open: function(e) {
        $diag.html('<span>hello</span>');
      },
      close: function() {
        $diag.dialog("destroy").empty();
      },
      modal: $("#makemodal").data("modal")
    });
  });

  $("#makemodal").click(function() {
    if ($(this).data("modal")) {
      $(this).data("modal", false);
      $(this).val("Make Modal");
    } else {
      $(this).data("modal", true);
      $(this).val("Remove Modal");
    }
  });
});

每次都会创建一个新对话框并在关闭时销毁它。唯一的区别是modal首选项存储在某个地方。您也可以通过将其存储在全局变量中来完成此操作。

更新1

根据您的说明，您要做的是删除或创建ui-widget-overlay元素。

尝试使用此尺寸：http://jsfiddle.net/s9zmfkdn/5/

$(function() {
  function removeOverlay() {
    $(".ui-widget-overlay").remove();
  }

  function setOverlay() {
    if ($(".ui-widget-overlay").length) {
      return false;
    }
    var $ov = $("<div>", {
      class: "ui-widget-overlay"
    }).css({
      width: $(window).width(),
      height: $(window).height(),
      zIndex: 1001
    });
    $("body").append($ov);
  }

  $("#basesystem").dialog({
    open: function(e) {
      $(this).html('<span>hello</span>');
      var $button = $("<a>", {
        href: "#"
      }).html("Toggle Modal").button().click(function() {
        if ($(".ui-widget-overlay").length) {
          removeOverlay();
        } else {
          setOverlay();
        }
      }).appendTo($(this));
    },
    close: function() {
      $(this).empty();
    },
    modal: true,
    autoOpen: false
  });

  $("#makemodal").click(function() {
    if ($("#basesystem").dialog("option", "modal")) {
      $("#basesystem").dialog("option", "modal", false);
      $(this).val("Make Modal");
    } else {
      $("#basesystem").dialog("option", "modal", true);
      $(this).val("Remove Modal");
    }
  });

  $(".moduleloader").click(function() {
    $("#basesystem").dialog("open");
  });
});

初始化后，jQuery对话框不会切换到模态

1 个答案: