0

modalpageというdivID
があり、cssがあります。20分間ポップアップを動的に表示し、30秒ごとに変更できるjavascript関数が必要です。現在、次のjavascript関数があります。誰か助けてくれませんか

<script language="javascript" type="text/javascript">
function revealModal(divID)
{
    window.onscroll = function () { 
        document.getElementById(divID).style.top = document.body.scrollTop;
    };
    document.getElementById(divID).style.display = "block";
    document.getElementById(divID).style.top = document.body.scrollTop;
}

これは、入力IDボタンによって呼び出されます。

<input id="Button1" type="button" value="Click here" onclick="revealModal('modalPage')" />

ありがとう

これは私が思いついたものです

function revealModal(divID)
{
var i = 1;
divID.replace('*', i);
setInterval(function(){revealModal(divID)},1000);
i = i + 1;
if (i == 3) i = 1;
var div = getElementById(divID)
window.onscroll = function () { document.getElementById(divID).style.top =       document.body.scrollTop; };
document.getElementById(divID).style.display = "block";
document.getElementById(divID).style.top = document.body.scrollTop;
}

しかし、これは毎回modular_3を表示するようには機能していません。3つのdivがすべて同じファイルにあるためですか？

<input id="Button1" type="button" value="Click heres" onclick="revealModal('modalPage_*')" />
4

1 に答える 1

1

ええと、一つには、その設定された間隔を関数の中に入れないでください。これにより、最初のクリックで終了しないサイクルが開始され、渡されたdividがトリガーされ続けます。

おそらくあなたがすべきことは、更新されるべきIDの配列を保持し、関数内でそれをループすることです...

var divs = [];

function addID(id)
{
    divs.push(id);
}

function revealModal()
{
    for(var i = 0; i < divs.length; i ++)
    {
        var div = getElementById('modalPage_' + divs[i]);

        window.onscroll = function () { 
            div.style.top = document.body.scrollTop; 
        }

        div.style.display = "block";
        div.style.top = document.body.scrollTop;
    }
}

setInterval(function(){revealModal()},1000);

そしてあなたのhtmlボタン：

<input id="Button1" type="button" value="Click heres" onclick="addID('1')" />
<input id="Button2" type="button" value="Click heres" onclick="addID('2')" />
<input id="Button3" type="button" value="Click heres" onclick="addID('3')" />

今これを考えてください-私はあなたの要求を本当に理解していません。他の多くの人も理解していないようです。私が見た方法は、クリック時にdivを表示し、n秒ごとに更新されることを確認したいというものでした。この場合、1000ミリ秒、つまり30秒ごとに必要だと言っても1秒ごとを選択したように見えます。十分に公平です。1000から30000に変更してください。更新するのは、画面上の特定の位置に固定され、コンテンツが更新されないことを確認することだけのようです。

だから私がやったことは、関数の外側に間隔を作って、それが常に行くようにすることです。次に、クリックすると、IDがdivs配列にプッシュされ、間隔によってループ内の内容のみが更新されます。概念的にはこれは機能しますが、それを行うには悪い方法のようです。

jqueryのような簡単なライブラリを使用し、表示されているかどうかに関係なく位置を更新するスクロールリスナーを配置する必要があります。タグでjqueryを指定したが、例ではそれをなめないでください。これは、ライブラリに完全に精通していないことを意味すると思います。

これは、すべてのモーダルdivに「モーダル」のクラスを追加し、これを使用するだけで実行できます。

$(document).ready(function(){
    $(window).scroll(function(){
        $('.modal').css('top', $(window).scrollTop() + 'px');
    });

    $('.modal').on('click', function(){
        $(this).css('display', 'block');
    });
});

もちろん、これを機能させるには、この呼び出しの前にjqueryライブラリを呼び出す必要があります。

于 2012-10-19T01:06:56.323 に答える