jQuery UIダイアログのカスタム閉じる関数

Question

jQuery UIダイアログを使用して閉じるためにカスタム関数を呼び出す方法を見つけようとしています。

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

ことも可能です。このまたは私は実装するための別の方法を見つける必要があります。

$("#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") 
}); 

私のボタンは次のように私のダイアログから分離されていますか？

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

これが唯一のボタンセットを残して、タイトルバーとコンテンツを非表示になります。ユーザーはModalのためにSaveまたはCancelを押す必要があります。