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.

Answer 2

Rather than loading the entire html file, load just one part of it.

$('#simplemodal-content').load('Renderer.htm body');

This will load the body only, excluding any CSS or scripts.

Answer 3

The answer of Keare is indeed useful to seperate the css/js from the external html so it doesn't interfere with the current page. It can also be used as a base for the modal dialog.

As an alternative I've also found this solution which uses an iframe in the modal dialog itself. In this case you might have a problem with scrollbars, which is already solved here: http://bit.ly/anbyf2

$('#basic-modal .basic').click(function(e) {
    var src = "http://www.google.com";
    $.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
        closeHTML: "",
        containerCss: {
            backgroundColor: "#fff",
            borderColor: "#fff",
            height: 456,
            padding: 0,
            width: 834
        },
        overlayClose: true
    });

    return false;
});

Answer 4

Whilst rolling your own solution is great for learning, and may possibly be more efficient, there are plenty of jQuery plug-ins that do this (and have solved all the problems for you). Examples include:

http://colorpowered.com/colorbox/ and http://fancybox.net/