How to close jquery ui dialog when clicking on link inside the dialog

Question

I've made a terms and conditions page. I want to make it appear in a jQuery dialog.

I declare a variable for the dialog:

var $dialog = $('#TCsWindow').html('<iframe style="border: 0px;" src="importantInformation.html" width="100%" height="100%"></iframe>').hide();

and then create a function to open the dialog:

    function opendialog(page) {
    $dialog.dialog({
        title: "",
        autoOpen: false,
        dialogClass: 'dialog_fixed TCdialog centered',
        modal: true,
        height: 500,
        width:400,
        responsive: true,
        draggable:true,
        open: function (event, ui) {
            $('#TCsWindow').css('overflow', 'hidden'); //this line does the actual hiding
            }
        });
    $dialog.dialog('open');
}

and finally attach a click() event to an element on the page:

    $("#TCLink").click(function(event) {
    event.preventDefault();
    opendialog("importantInformation.html");
});

The problem I have is that there is a link in the importantInformation.html page which when clicked just needs to close the dialog. The link has an id of "closeTC":

    $("#closeTC").click(function(event){
    $dialog.close();
});

but what happens is that the actual containing page loads inside the iFrame. It seems that the event.preventDefault(); is being ignored.

Can anyone shed any light as to where I'm going wrong? The default close "x" on the dialog works just fine, but I don't know how to find out how that works.

Answer 1

该对话框位于父窗口中，而不位于iframe中，以便可以使用parent从iframe访问父窗口中的元素。

$(parent.document).find('#TCsWindow').dialog( "close" );

Answer 2

您需要使用event.stopPropagation()

Answer 3

You need to call the jQuery .dialog("close") method from the parent:

See this answer for reference.

The Code

$(parent.document).find('#TCsWindow').dialog( "close" );