SimpleModal 在对话框中加载外部 HTML 页面

Question

是否可以将外部 HTML 文件加载到变量中，然后使用该变量加载 SimpleModal 对话框？像这样的事情：

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

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

        return false;
    });
});

另一种解决方案（可行）是在隐藏的 div 中加载外部 HTML 文件，然后使用它来加载对话框。

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

但是，如果我采用这种方法，为外部页面定义的 CSS 可能会干扰我的本地页面，从而更改布局，这是不希望的。

如果有比这些方法更好的第三种解决方案，请分享。

PS：遗憾的是它也必须在 IE6 中完美运行。

Answer 1

我认为您需要使用 iframe 来完成此任务。即使您能够在页面上显示页面内容后将其加载到变量中，它的 css 和 javascript 也会开始影响您的页面。

像这样的东西可能会起作用：

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

虽然您可能不想直接使用 iframe 作为模式对象，但我希望这足以让您指向正确的方向。

Answer 2

不要加载整个 html 文件，而只加载其中的一部分。

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

这将仅加载正文，不包括任何 CSS 或脚本。

Answer 3

Keare 的答案确实有助于将 css/js 与外部 html 分开，这样它就不会干扰当前页面。它也可以用作模式对话框的基础。

作为替代方案，我还发现了这个解决方案，它在模式对话框本身中使用 iframe。在这种情况下，您可能会遇到滚动条问题，该问题已在此处解决：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

虽然滚动您自己的解决方案非常适合学习，并且可能会更有效，但有大量 jQuery 插件可以执行此操作（并已为您解决了所有问题）。示例包括：

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

Answer 5

SimpleModal 网站上的 评论 表明以下代码应该有效：

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

Answer 6

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