一次關閉一個jquery-ui對話框

Question

我在使用多個jQuery UI對話框時遇到問題。 我想要的是我可以有多個對話框，並且單擊類為“ .close-modal”的按鈕只會關閉該按鈕所在的對話框。 現在，首先介紹一下背景：我在站點的“主要”父級中有一個簡單的函數，它將通過單擊類為“ .modal”的鏈接打開一個模式對話框。

在父母中

function modal( href, title ) {
    var $dialog = $('<div></div>');
    $dialog.html('<iframe class="modal" name="' + title + '" style="border: 0px;" src="' + href + '" width="100%" height="100%"></iframe>');
    $dialog.dialog({
        autoOpen: false,
        modal: true,
        height: 650,
        width: 950,
        title: title
    });


    $dialog.dialog( 'open' );

    $(document).bind( 'close-dialog', function( ) {
        $dialog.dialog( 'close' );
    });
}

$('a.modal').click( function( event ) {
    event.preventDefault( );
    modal( $(this).attr( 'href' ), $(this).attr( 'title' ) );
}

這段代碼按照我想要的方式工作。 要從對話框中打開對話框，請使用正確的參數調用父窗口的模態函數，以便可以在父窗口中顯示多個對話框：

在對話框中

( function( $ ) {
    $(document).ready( function( ) {
        $('a.modal').click( function( event ) {
            event.preventDefault( );
            parent.modal( $(this).attr( 'href' ), $(this).attr( 'title' ) );
        }

        /** Trigger the close-dialog event on the parent to close the current dialog. */
        $('.close-dialog').click( function( ) {
            parent.jQuery( parent.document ).trigger( 'close-dialog' );
        });
    });
})( jQuery );

因此，本質上； 我已經在父窗口上定義了一個事件（“ close-dialog”），該事件可以由iframe中的代碼調用，該代碼將調用$ dialog.dialog（'close'）;。 這非常出色； 我甚至可以在對話框中創建多個對話框，但是問題是，一旦單擊button.close-dialog ，它就會關閉所有對話框。

有什么方法可以確定從哪個對話框中調用了該事件？ 還是將事件綁定到當前對話框？

Answer 1

您可以使用jquery modal的按鈕選項。

<script>
$(function() {
    $( ".myModals" ).dialog({
        modal: true,
        buttons: {
            Close: function() {
                $( this ).dialog( "close" );
            }
        }
    });
});
</script>

這應該一次性完成所有模態的操作，並且它創建的按鈕僅適用於自己。 希望有幫助！