1

是否可以将外部 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 中完美运行。

4

6 回答 6

3

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

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

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

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

于 2010-04-30T16:16:59.693 回答
2

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

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

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

于 2010-04-30T18:32:11.913 回答
1

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;
});
于 2010-05-03T13:04:59.053 回答
1

虽然滚动您自己的解决方案非常适合学习，并且可能更有效，但有很多 jQuery 插件可以做到这一点（并且已经为您解决了所有问题）。示例包括：

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

于 2010-05-03T13:08:57.160 回答
1

SimpleModal 网站上的评论表明以下代码应该可以工作：

$.get('page.html', function(data) { $.modal(data); });
于 2011-08-31T22:33:15.480 回答
0 
$('#iframeElement').load('Renderer.html');
于 2011-03-21T14:28:48.850 回答