closing a jquery-ui dialog one at a time

Question

I'm having an issue with multiple jQuery UI dialogs. What I want is that I can have multiple dialogs, and a click on a button with the class ".close-modal" will only close the dialog in which that button was located. Now, first for a little background: I have a simple function in the "main" parent of the site, which will open a modal dialog by clicking on a link with the class ".modal";

In the parent

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

This code works the way I want it to. To open a dialog from a dialog, I call the parent window's modal function with the correct parameters, so that multiple dialogs can be displayed within the parent:

In the dialog

( 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 );

So, in essence; I've defined an event on the parent window ("close-dialog"), which can be called by the code within the iframe which will call $dialog.dialog( 'close' ); This works brilliantly; I can create multiple dialogs, even from within dialogs, but the issue is that once I click a button.close-dialog , it closes all of my dialogs.

Is there any way to determine from which dialog the event was called? Or bind the event to the current dialog?

Answer 1

You could use jquery modal's buttons option.

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

This should do it for all your modals in one go, and the buttons it creates only apply to themselves. Hope that helps!