Close Bootstrap modal from inside iframe

The issue is that jQuery events are being registered with the individual page's instance of jQuery. So, $('#iframeModal', window.parent.document).modal('hide'); is actually going to trigger the hide event in the iframe, not the parent document.

This should work: parent.$('#iframeModal').modal('hide');

This will use the parent's instance of jQuery to find the item (so no context is needed), and it will then fire the event correctly in the parent.

You can always create a globally accessible function which closes the Bootstrap modal window.

eg.

window.closeModal = function(){
    $('#iframeModal').modal('hide');
};

Then from the iframe, call it using:

window.parent.closeModal();

One more solution in case you don't know id of modal which use iframe :

Add function CloseModal

function CloseModal(frameElement) {
     if (frameElement) {
        var dialog = $(frameElement).closest(".modal");
        if (dialog.length > 0) {
            dialog.modal("hide");
        }
     }
}

where frameElement is reference to iframe element container.

And this parameter can be passed from iframe like so:

window.parent.CloseModal(window.frameElement);

More about window.frameElement you can find here