close a modal popup from an iframe

Question

I am using modal.js to pop up dialog box in a page. When the user clicks on a link an iframe will show on a modal dialog box. There is a button inside that iframe. When the button clicks, the modal should be closed and page should redirect to another url. Is it posssible?

Answer 1

You can use jQuery binding to trigger a custom event.

On the click, before you show the iframe , do the following in javascript:

// Bind a trigger
$('body').unbind('myUniqueEventName', SomeJavascriptFunction);
$('body').bind('myUniqueEventName', SomeJavascriptFunction);

Elsewhere in javascript define the function SomeJavascriptFunction :

function SomeJavascriptFunction(event, extraData) {
    // This is run when the button on the popup is clicked
    // You can pass along data using the extraData parameter
    // You can also redirect to another page
    var someData = extraData.someData; // Will contain 'someValue'
}

Now all we have to do is trigger the custom event from the iframe. We do this by adding the following code in the iframe when the button is clicked.

parent.$('body').trigger(
    'myUniqueEventName', {
        someData: 'someValue'
    });
});