代码之家 › 专栏 › 技术社区 › Bart

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

simplemodal modal-dialog css jquery javascript

Bart · 技术社区 · 14 年前

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

6 回复 | 直到 13 年前

jdcantrell 14 年前

我想你需要用一个iframe来完成这个任务。即使您能够在页面上显示页面内容后将其加载到变量中,其css和javascript也会开始影响您的页面。

类似的事情可能会奏效:

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

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

Mark 14 年前

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

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

这将只加载正文,不包括任何css或脚本。

Bart 14 年前

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

Dan Diplo 14 年前

尽管滚动您自己的解决方案对学习很有帮助,而且可能更有效,但是有很多jquery插件可以做到这一点(并且已经为您解决了所有问题)。示例包括:

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

JW8 13 年前

一 comment 在SimpleModal站点上,指示以下代码应该可以工作:

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

animuson 13 年前

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