閉じるのjQuery UIのダイアログ

Question

私は人々がオーバーレイをクリックしたときに、通常uは

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

あなたは、私が問題を発見

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

オーケーopenメソッド内でイベントをバインドすることができます。 ダイアログが初期化される前にダイアログを閉じようとしていました。

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