在疊加層點擊上關閉jQuery UI對話框

Question

當人們點擊疊加層時，我想關閉我的模態，通常你會用

jQuery('.ui-widget-overlay').bind('click', function() {
            jQuery('#dialog').dialog('close');
        })

但是我在創建模態后正在加載模態，因此上述代碼似乎以某種方式干擾了我的模態。 到目前為止，這是我的代碼。

 var dialog = $(".dialog").dialog({ autoOpen: false, closeText: "", width: 'auto', modal: true, position: { my: "center top", at: "center top+30", of: "body" }, show: { effect: 'fade', duration: 250, }, hide: { effect: 'fade', duration: 250 }, }); $(".currentDay").click(function () { var id = event.target.id; var url = '/Home/CalenderPartial/' + id; dialog.load(url, function () { dialog.dialog("open"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 1

您可以將事件綁定到open方法中

var dialog = $(".dialog").dialog({
  autoOpen: false,
  closeText: "",
  width: 'auto',
  modal: true,
  open: function(event, ui) {   //added here
    jQuery('.ui-widget-overlay').on('click', function() {
      jQuery('#dialog').dialog('close');
    });
  },
  position: {
    my: "center top",
    at: "center top+30",
    of: "body"
  },
  show: {
    effect: 'fade',
    duration: 250,

  },
  hide: {
    effect: 'fade',
    duration: 250
  },

});

Answer 2

好吧，我發現了問題。 我試圖在初始化之前關閉對話框。

  var dialog = $(".dialog").dialog({ autoOpen: false, closeText: "", width: 'auto', modal: true, position: { my: "center top", at: "center top+30", of: "body" }, show: { effect: 'fade', duration: 250, }, hide: { effect: 'fade', duration: 250 }, open: function () { jQuery('.ui-widget-overlay').on('click', function () { dialog.dialog('close'); }); }, }); $(".currentDay").click(function () { var id = event.target.id; var url = '/Home/CalenderPartial/' + id; dialog.load(url, function () { dialog.dialog("open"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

這是我最終得到的代碼，並且按預期工作。

總結一下，將這段代碼放在對話框init中。

open: function() {
        jQuery('.ui-widget-overlay').on('click', function() {
            jQuery('#dialog').dialog('close');
        })