javascript - 如何每 30 秒更改一次模态弹出窗口？

Question

我有一个名为 modalpage 的 div id
并有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。是因为所有三个 div 都在同一个文件中吗？？

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

Answer 1

好吧，一方面，不要将设置的时间间隔放入函数中。这将在第一次点击时开始一个永无止境的循环，该循环将继续触发它传递的 div id。

您可能应该做的是保留一个应该更新的 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 毫秒，或者每 1 秒一次，尽管您说您想要每 30 秒一次。公平地说，将 1000 更改为 30000。看起来您所做的唯一更新是确保它固定在屏幕上的某个位置而不是更新内容。

所以我所做的是将间隔设置在函数之外，以便它始终运行。然后单击您将 id 插入 div 数组，其中间隔将仅更新循环内的内容。虽然从概念上讲这可行，但这似乎是一种糟糕的方法。

您应该只使用像 jquery 这样的简单库，并放置一个滚动监听器来更新位置，无论它们是否显示。鉴于您在标签中指定了 jquery 但在您的示例中没有使用它，我认为这意味着您并不完全熟悉该库。

这可以通过简单地向每个模态 div 添加一个“模态”类并使用它来完成:

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

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

当然，您需要在此调用之前调用 jquery 库才能使其工作。