Question

Let’s say I have an iframe on a HTML page:

<iframe src="/script.php"></frame>

The iframe is inside a modal box window (I’m using a jQuery plugin for modal window: http://opensource.steffenhollstein.de/templates/modalbox/).

When the modal box gets closed, the iframe inside it is removed from the page’s HTML with jQuery remove() method.

How can I notice that the iframe has been removed and execute some javascript code? Basically what I want is to refresh the page once the modal box is closed. This is the close method for the modal box plugin:

jQuery.fn.modalBox.close = function(settings){

    // merge the plugin defaults with custom options
    settings = jQuery.extend({}, jQuery.fn.modalBox.defaults, settings);

    if( settings.setFaderLayer && settings.setModalboxContainer ){
        jQuery(settings.setFaderLayer).remove();
        jQuery(settings.setModalboxContainer).remove();
        jQuery("iframe.modalBoxIe6layerfix").remove();
    }
};

Answer 1

You can add an event trigger inside the modalBox.close method and listen to it:

jQuery(document).bind('modalclose'), function() {
    // stuff to do when the modalbox closes
});

var fn = jQuery.fn.modalBox.close;
jQuery.fn.modalBox.close = function() {
    fn.apply(this, arguments);
    jQuery(document).trigger('modalclose');
};

You can also apply a custom event for removing elements in jQuery:

(function() {
    var ev = new $.Event('remove'),
        orig = $.fn.remove;
    $.fn.remove = function() {
        $(this).trigger(ev);
        orig.apply(this, arguments);
    }
})();

$('iframe').bind('remove', function() {
    // do stuff when an iframe was removed
});