在jQuery模式中显示外部文件的内容

时间:2011-11-16 15:52:46

标签: javascript jquery modal-dialog

我使用simple modal来理解jQuery模式的工作原理。通过这个过程

var load = 'alert.html'; // THE PURPOSE OF THIS QUESTION IS TO CHANGE "alert.html" to "image.jpg"
$(this).click(function(e) {
    e.preventDefault();
    $('body').append('<div id="overlay" />');
    $('#overlay').fadeIn(300, function() {
        $('body').append('<div id="alertModalOuter"><div id="alertModal"></div></div>');
        var outer = $('#alertModalOuter');
        var modal = $('#alertModal');
        var defWidth = outer.outerWidth();
        var defHeight = outer.outerHeight();
        modal.load(load + ' #alert', function() {
            var alertBoxContent = $('#alert');
            var alertWidth = alertBoxContent.outerWidth();
            var alertHeight = alertBoxContent.outerHeight();
            var widthCombine = -((defWidth + alertWidth) / 2);
            var heightCombine = -((defHeight + alertHeight) / 2);
            modal.animate({width: alertWidth, height: alertHeight}, 200);
            outer.animate({marginLeft: widthCombine, marginTop: heightCombine}, 200, function() {
                alertBoxContent.fadeIn(200, function() {
                });
            });
        });

这会将外部文件的内容(从load)附加到模态窗口;但这仅适用于id =“alert”标签内的内容。如何删除“alert”角色以显示外部文件的整个内容。例如,我想加载一个外部图像(这是一个图像文件而不是“alert”标签之间)。

1 个答案:

答案 0 :(得分:1)

您不必指定#alert选择器,它将加载整个页面。值得注意的是,如果您没有指定选择器,则在删除之前加载调用.html()并处理所有脚本。您可能会运行一些脚本,从而产生意外结果。 The .load() docs