javascript - SimpleModal load external HTML page in dialog - Stack Overflow

admin管理员组

文章数量:1287579

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.

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.

• javascript
• jquery
• css
• modal-dialog
• simplemodal

Share Improve this question Follow asked Apr 30, 2010 at 14:22 BartBart 10k77 gold badges4949 silver badges6565 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

I think you will need to use an iframe to acplish 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.

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.

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.";
    $.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;
});

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./colorbox/ and http://fancybox/

A ment on the SimpleModal site indicates that the following code should work:

$.get('page.html', function(data) { $.modal(data); });

$('#iframeElement').load('Renderer.html');

本文标签： javascriptSimpleModal load external HTML page in dialogStack Overflow