Question

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

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

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

        return false;
    });
});

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

$(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的答案对于从外部html中分离css / js确实很有用，因此它不会干扰当前页面。它也可以用作模态对话框的基础。

作为替代方案，我也发现这个解决方案在模态对话框中使用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网站上的comment表示以下代码应该有效：

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

Answer 6

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

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

6 个答案: