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.