0

我的网站上有一个 div（“button_form”），它分配了一个 jquery .on("click") 函数，这样当点击另一个 div（“popup_box”）时，点击时屏幕中间会出现。我正在使用 load() 从另一个 html 源填充 popup_box 的内容。问题是当 load() 函数被执行时，它在站点上隐藏了一个完全不相关的背景图像（“横幅”）

我已经尝试删除 jquery 的一行（下面标记为问题行！）并且“弹出” div 完美地工作，并且背景图像没有隐藏......所以我知道这是 load() 的问题。

如何将内容动态加载到我的 popup_box 中而不影响我的横幅背景图像？

注意：整个事情在我的本地机器上按计划工作，但是当我将它上传到网络时，它不再工作 - 也就是说，单击 button_form 时横幅背景图像消失了。什么都没有改变，代码完全相同，而且我使用的是完全相同的浏览器。

谢谢你的帮助！

索引.html

<html>
<head>...</head>
<body>

    <div id="overlay"></div>
<div id="popup_box"></div>

    <div id="banner"></div>

    ....

    <div id="button_form"></div>

</body>
</html>

横幅交换.js

// art
var art = new Array();
art[0] = "_img/banner_database.jpg";
art[1] = "_img/banner_cloud.jpg";
art[2] = "_img/banner_trends2.jpg";
art[3] = "_img/banner_team.jpg";

var img = 1;              // starting slides
var qty = 4;              // total number of slides


function newBanner(){ //this function is executed every 4 seconds

    document.getElementById('banner').style.backgroundImage="url('" + art[img-1] + "')";

    // set the next image in the queue    
    if(img<qty){
        img++;
    }else{
        img=1;
    }
}

jQuery代码：

$(document).ready(function(){
    $('#button_form').on("click", function(){

        $("#overlay").show(0);

        $("#overlay").fadeTo(500,0.5);

        $("#popup_box").show(0);

        $("#popup_box").animate({
            height:'700px',
            width: '500px',
            margin:'125px 0 0 -250px'}, 
            500,   // duration:
            // *****  PROBLEM LINE: ******
            function(){$(this).load('_includes/form.html')} 
        );
    });
});
4

1 回答 1

0

正如我在评论中提到的，这可能是 css 覆盖的问题。

请检查加载的内容_includes/form.html以查看是否加载了任何 css 规则（样式表）并检查应用于横幅的样式以查看是否应用了任何新规则

于 2013-07-09T03:23:36.470 回答