CODEWITHSUNDEEP
javascriptjqueryhtmlcsspopup
SoftwareDeveloper
SoftwareDeveloper

Reputation: 185

How can I change a modal popup every 30 seconds?

I have a div id called modalpage
and have css. I need a javascript function which can dynamically shows popup for 20 mins and change in every 30 secs right now i have the following javascript function. Can anybody help me please

<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;
}

which is called by a input id button.

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

Thanks

This is what i came up with 

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;
}

but this is not working its showing the modular_3 every time. is it because of all three divs are in the same file ??

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

Upvotes: 0

Views: 1000

Answers (1)

Kai Qing
Kai Qing

Reputation: 18843

Well, for one thing don't put that set interval inside the function. That would start a never ending cycle on the first click that would keep triggering the div id it was passed.

What you should probably do is keep an array of id's that should be updated and loop through that in the function...

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);

And your html buttons:

<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')" />

Now consider this - I don't really understand your request. It looks like a bunch of others don't understand either. The way I saw it was you want to reveal a div on click and make sure it updates every nth seconds. In this case, it looks like you chose 1000 ms, or every 1 second even though you said you wanted every 30 seconds. Fair enough, change that 1000 to 30000. It looks like the ONLY update you do is make sure it sticks to a certain position on the screen and NOT updates the content.

So what I've done is make the interval outside the function so it is always going. Then on click you push the id into the divs array where the interval will update only what is inside the loop. While conceptually this will work, it seems like a bad way to do it.

You should just use an easy library like jquery and place a scroll listener that updates the position whether or not they're revealed. Seeing as you specified jquery in your tags but don't use a lick of it in your example, I assume that means you're not entirely familiar with the library.

This could be done by simply adding a class of "modal" to every modal div and using this:

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

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

Of course you would need to call the jquery library before this call for this to work.

Upvotes: 1

Related Questions