Question

我遇到了一些特定脚本的问题。我找到了一个简单的模态窗口脚本，我正在尝试实现它。最初的功能是它只是隐藏/显示带有“静态”内容的窗口div。这很好，但我需要能够动态指定内容。所以我通过允许 .load（）函数来“注入”div的内容来改变，然后脚本只是正常显示窗口。但是，当关闭模式时，我使用 .empty（）清空div的内容，以便能够动态添加不同的内容，具体取决于用于链接的链接中的属性值。打开模型窗口。

如果我使用 .load（）函数而不是仅仅将<embed>代码硬编码到窗口中，那么一切都运行得很好，除非窗口不在屏幕中间居中div的内容。如果我对<embed>对象进行硬编码，那么它就会很好并且看起来很棒。

如果将<embed>对象动态注入div中，显然整个窗口高度/宽度存在差异。我尝试在脚本查找窗口div的总宽度/高度之前和之后定位.load()函数，但这似乎不会影响任何内容。

非常感谢任何帮助!!

这是脚本：

$(document).ready(function() {  

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();

        //Get the A tag
        var id = $(this).attr('href');
        //Get source file for AJAX request
        var source = $(this).attr('src');

        //If source is set, send ajax request, and then load content into window
        if(source != undefined) {
            $('.window').load(source);
        }

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000); 

    });

    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();

        $('#mask').fadeOut("slow");
        $('.window').fadeOut("slow", function() {       
            $(this).empty();
        });
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).fadeOut("slow");
        $('.window').fadeOut("slow", function() {
            $(this).empty();
        });
    });         
});

Answer 1

这是因为加载正在触发AJAX请求，并且在加载内容之前正在运行您的居中代码。您需要做的是将模态置于ajax完整处理程序中。

$('.window').load(source,null,function(){ functionThatCentersModal() });

当动态“注入”内容时，jQuery模态窗口不居中

1 个答案: