javascript - 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 用作模态对象，但我希望这足以让您指明正确的方向。