關閉jQuery UI的對話框中單擊

我想結束我的模態，當人們點擊重疊，通常ü會使用關閉jQuery UI的對話框中單擊

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>

來源

2016-09-28 Bjørn Henneberg

檢查jQuery的文件，似乎它不是渲染 – Bharat

頁面上的模態工作正常，它100％是什麼它打算做的唯一的事情IM缺少的就是關閉功能。 –

您可以將事件綁定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 
    }, 

});

來源

2016-09-28 12:12:45 brk

是的，這是我在其他一些帖子上閱讀，但我會在哪裏放？ –

對不起，我沒有得到當你說**我在哪裏可以把** – brk

在上面的代碼中我會把這個打開：function（）？我試着在幾個地方輸入它，它只是打破了我的模式。 –

好吧，我發現這個問題裏面。我正在嘗試關閉對話框，然後它被初始化。

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>

這是我最終的代碼，而這按預期工作。

所以總結一下，把這段代碼放到你的dialog init裏面。

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

來源

2016-09-28 12:21:27

關閉jQuery UI的對話框中單擊

回答

相關問題