Question

我有一个名为modalpage的div id 并有css。我需要一个javascript函数，它可以动态显示弹出20分钟，并且每30秒更改一次，我有以下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推入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库才能使其正常工作。

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

1 个答案: