0

私のサイト ("button_form") に div があり、jquery .on("click") 関数が割り当てられているため、クリックすると別の div ("popup_box") が画面の中央に表示されます。別の HTML ソースから popup_box のコンテンツを取り込むために load() を使用しています。問題は、load() 関数が実行されると、サイト上のまったく関係のない背景画像 (「バナー」) が非表示になることです。

私はjqueryの1行を削除しようとしました（以下に問題行としてマークされています！）、「ポップアップ」divは完全に機能し、背景画像は隠されていません...だから問題はload（）であることがわかります。

popup_box にコンテンツを動的にロードし、バナーの背景画像に影響を与えないようにするにはどうすればよいですか?

注: ローカル マシンではすべてが計画どおりに機能しますが、Web にアップロードすると機能しなくなります。つまり、button_form をクリックするとバナーの背景画像が消えます。何も変わっていません。コードはまったく同じで、まったく同じブラウザを使用しています。

ご協力いただきありがとうございます！

index.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>

bannerSwap.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