JQuery UI dialog close

December 17th, 2008 Posted in Web 2.0

We have a lot of situations to close a JQuery UI dialog from the dialog itself other than using the default close button. But the fuction dailog(”close”) will not work from the iframe since JQuery doesn’t support cross-window operations.

I am loading a Jquery UI dialog and inside it an iframe to show a form. After posting the forum via ajax I analyze the response and want to close the dialog (born from the parent window) or need to close the dialog when clicking on a “Cancel” button.
I have solved this problem by creating a method on the parent window that will close the dialog and then call that method from the child window.

Cancel button & onclick code inside the dialog iframe

<input name=”cancel” type=”button” value=”Cancel” onclick=”$(parent.document).find(’#closedailog’).trigger(’click’);” />

Code in parent window

<input id=”closedailog” name=”closedialog” onclick=”$(’.ui-dialog-titlebar-close’).trigger(’click’);” type=”submit” style=”display:none”/>

Put the parent window code any where in the parent window. The code will just trigger the click event of the dialog’s close button and will work better than using the function dailog(”close”) function.

8 Responses to “ JQuery UI dialog close ”

  1. Limpan says:
    January 19, 2009 at 3:44 pm

    Cheers!

  2. Pettrie says:
    January 22, 2009 at 9:41 am

    hmm do not use a type=”submit” but just type=”hidden”

  3. israel says:
    March 5, 2009 at 8:00 pm

    thanks! there is another solution, try out:
    (code in dialog window)

    $(”#linkCancelar”).click(function(){
    $(this).parents(”.ui-dialog:first”).find(’.ui-dialog-titlebar-close’).trigger(’click’);
    });

  4. Jquery UI Dialog Close within iframe « ???? says:
    July 29, 2009 at 11:28 am

    [...] UI Dialog Close within iframe In 02 ??? on ?? 29, 2009 at 7:26 ?? JQuery UI dialog close December 17th, 2008 Posted in Web [...]

  5. Jonatan says:
    September 4, 2009 at 2:24 pm

    Congratulations very simple solution

  6. Mike Flynn says:
    September 18, 2009 at 11:42 pm

    Even simpler solution

    function CloseModal() {
    $(’.modal’).dialog(’close’);
    }


    cancel

  7. indialike says:
    January 20, 2010 at 12:38 pm

    Very nice and useful tutorials for web designers,
    Thanks for posting.

  8. Lene says:
    February 5, 2010 at 3:26 am

    thanks guys, that’s very helpful!

Leave a Reply