jQuery ui dialog custom close функции

Question

Я пытаюсь найти способ вызова пользовательских функций для закрытия и сохранения с помощью моего диалогового окна интерфейса jQuery.

$("#checkbox-confirm").dialog({ 
    width: 600, 
    autoOpen: false, 
    modal: true, 
    responsive: true, 
    close: function() { 
     // special things happen when they click the cancel button 
     $(this).dialog("close"); 
    }, 
    save: function() { 
     // also some special things then close the dialog 
    } 
}); 

$(".btn-cancel").click(function(e) { 
    e.preventDefault(); 
    $("#checkbox-confirm").dialog("close"); 
}); 

$(".btn-save").click(function(e) { 
    e.preventDefault(); 
    $("#checkbox-confirm").dialog("save") 
}); 

Мои кнопки отделены от моего диалога, как:

<div id="#checkbox-confirm"> 
    modal things here 
    <button class="btn-cancel>Cancel</button> 
    <button class="btn-save">Save</button> 
</div> 

Является ли это даже возможно, или я должен найти другой способ реализации?

Answer 1

Возможно, вы должны переместить кнопки в модальное окно. Концепция модального заключается в том, что некоторый контент вынужден привлекать внимание пользователя (как правило, выше предыдущего содержимого) и ожидает какой-то ответ (закрыть, отправить и т. Д.).

Это, как говорится, можно управлять модальным с помощью внешних кнопок/органов управления.

Answer 2

Я хотел бы предложить следующее:

$("#checkbox-confirm").dialog({ 
    width: 600, 
    autoOpen: false, 
    modal: true, 
    responsive: true, 
    _allowInteractions: function(e){ 
     return !!$(e.target).is("#checkbox-confirm button") || this._super(e); 
    } 
}); 

$(".btn-cancel").click(function(e) { 
    e.preventDefault(); 
    // Do special Cancel stuff 
    $("#checkbox-confirm").dialog("close"); 
}); 

$(".btn-save").click(function(e) { 
    e.preventDefault(); 
    // Do Special Save Stuff 
    $("#checkbox-confirm").dialog("close"); 
}); 

Лично я бы не переместить кнопки из набора кнопок и вместо того, чтобы сделать ваш диалог менее заметными.

CSS

.mini-dialog .ui-dialog-titlebar { 
    display: none; 
} 

.mini-dilaog .ui-dialog-buttonpane { 
    margin: 0; 
    border: 0; 
} 

JQuery

$("#checkbox-confirm").dialog({ 
    dialogClass: "mini-dialog", 
    width: 600, 
    autoOpen: false, 
    modal: true, 
    responsive: true, 
    buttons: [{ 
     text: "Cancel", 
     class: "btn-cancel", 
     click: function(){ 
     // special things happen when they click the cancel button 
     $(this).dialog("close"); 
     } 
    }, 
    { 
     text: "Save", 
     class: "btn-save", 
     click: function(){ 
     // also some special things then close the dialog 
     $(this).dialog("close"); 
     } 
    }] 
}); 

$("#checkbox-confirm").on("dialogopen" function(e){ 
    $(this).css("display", "none"); 
}); 

Это скроет Titlebar и содержание, оставив только кнопку Set. Пользователь вынужден нажать Сохранить или Отменить из-за Modal.