0

我有一个名为 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;
}

但这不是每次都显示modules_3。是因为所有三个 div 都在同一个文件中吗？

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

1 回答 1

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 推送到 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 回答