SimpleModal load external HTML page in dialog

Question

Is it possible to load an external HTML file into a variable and then use this variable to load the SimpleModal dialog? Something like this:

$(document).ready(function($) {
    var externalPage $.get("Renderer.htm");

    $('#basic-modal .basic').click(function(e) {
        $(externalPage).modal();

        return false;
    });
});

An alternative solution (that works) is loading the external HTML file in a hidden div and then use this to load the dialog.

$(document).ready(function($) {
    $('#simplemodal-content').hide(); // or hide in css
    $('#simplemodal-content').load("Renderer.htm");

    $('#basic-modal .basic').click(function(e) {
        $('#simplemodal-content').modal();

        return false;
    });
});

However if I take this approach the css defined for the external page can interfere with my local page and thus change the layout, which is not desired.

If there's a 3rd solution that's better than these approaches, please share.

PS: sadly it also has to work perfectly in IE6.

Answer 1

I think you will need to use an iframe to accomplish this. Even if you are able to load the contents of the page into a variable once you display it on the page, its css and javascript will start affecting your page.

Something like this might work:

$('#iframeElement').attr('src','Renderer.html')
$('#iframeElement').modal()

Though you will probably not want to use the iframe directly as modal object, but I hope that this is enough to get you pointed in the right direction.