CODEWITHSUNDEEP
javascripthtmlpopup
Prateek
Prateek

Reputation: 43

How to open and close popups automatically with certain time period

I am making a web page, in which I have to open a popup window and it should remain open for a time period of 8 seconds(8000 ms).

After this time period that popup should be closed. Then again after 4 seconds I need to open same popup window for another 8 seconds.

I want to put some delay(4 seconds) before a popup open and closes automatically, and the popup window must be remain opened for 8 seconds

Here is my code:

<html>
<head>
    <script>
        function call()
        {
            popup = window.open('http://www.google.co.in');         
            setInterval(function() {wait();},4000);
        }   
        function caller()
        {
            setInterval(function() {call();},5000);
        }
        function wait()
        {
            popup.close();
        }
    </script>
</head>
<body onload="caller();">
</body>
</html>

I am familiar with java script functions like setInterval() and setTimeout() but I've found none of them useful in this case. I've also allowed my browser to open Popups, but this script opens a popup window and closes it as fast as time passes. Please help me to find out the glitch in my code.

Thank you.

Upvotes: 4

Views: 46424

Answers (5)

Luke
Luke

Reputation: 87

Hi you can close the popup window after a particular interval using this below code

 <button class="btn btn-success" type="submit" id="spk_button" onclick="javascript:setTimeout(function(){window.close()},3000);">Save</button>

Upvotes: 1

user2273202
user2273202

Reputation:

Your code is looking good in formatting but try to put some efforts on your code.
Try to use it as given below, Here is your whole code, I've tried it on my system, and it is working.

<html>
<head>
    <script>
        function call()
        {
            popup = window.open('http://www.google.co.in');         
            setTimeout(wait, 8000);
        }   
        function caller()
        {
            setInterval(call, 12000);
        }
        function wait()
        {
            popup.close();
        }
    </script>
</head>
<body onload="caller();">
</body>
</html>

Upvotes: 4

David Barker
David Barker

Reputation: 14620

You are not assigning your intervals to any variables, without having a reference to these intervals they will continue running indefinitely with no way of clearing them. A method of doing what you want would probably be better with setTimeout as the periods between opening / closing and then re-opening are all different, also you have no problems with constantly running intervals. The below code creates a loop that will run indefinitely until you want it to stop.

var popup = {
    open : function()
    {
        // Open popup
        this.popupWindow = window.open('http://www.google.co.in');

        // Return a timeout function
        return setTimeout(function() {
            // run close function on completion of timeout
            popup.close();
        }, 8000);
    },
    close : function()
    {
        this.popupWindow.close();
        // Assign timeout to local variable
        this.timeout = this.loop();
    },
    loop : function()
    {
        var self = this;

        // On first run open popup immediately, or wait 4 seconds and restart
        // the loop
        if (self.active === true)
        {
            return setTimeout(function() {
                self.timeout = self.open();
            }, 4000);
        }
        else
        {
            self.active = true;
            self.timeout = self.open();
        }
    },
    clearLoop : function()
    {
        clearTimeout(this.timeout);
        this.active = false;
    }
};

popup.loop();

to stop the loop at anytime you can call

popup.clearLoop();

Upvotes: 1

Teemu
Teemu

Reputation: 23406

Try these:

function call() {
    popup = window.open('http://www.google.co.in');         
    setTimeout(wait, 8000); // closes the pop-up after 8 secs delay
}

function caller(){
    setInterval(call, 12000); // opens a pop-up on every 12th second
}

Your current call() creates a new interval every time it's executed.

Upvotes: 2

Michal Politzer
Michal Politzer

Reputation: 313

You can write it as a "scenario":

function next(state) {
  switch(state) {
    case 0:
      showPopup();
      setTimeout("next(1);",8000);
    break;
    case 1:
      hidePopup();
      setTimeout("next(2);",4000);
    break;
    case 2:
      showPopup();
      setTimeout("next(3);",8000);
    break;

    ...etc...

  }
}

/* this you have to call at start */
function init() {
  next(0);
}

If you need in some step to repeat cycle, you can of course use next(0).

And of course there have to be functions showPopup and hidePopup

Upvotes: 0

Related Questions