一次关闭一个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>

这应该一次性完成所有模态的操作，并且它创建的按钮仅适用于自己。 希望有帮助！