Закрыть диалоговое окно 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%, что его намеревались сделать, единственное, что им не хватает на функциональность закрытия. –

Вы можете связать событие внутри 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

, где в приведенном выше коде я бы положил это open: 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>

это код, я закончил с, и это работает, как предполагалось.

поэтому, чтобы суммировать, введите этот код в свой диалог init.

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

источник

2016-09-28 12:21:27

Закрыть диалоговое окно JQuery UI на оверлее нажмите

ответ

Смежные вопросы