How to have a popup window open and close automatically

Hi All,

Sorry if this has been asked, I’m trying to figure out how close this popup using a counter, has anyone been able to do this?

Thanks

You want to open a popup on page load, then (presuming the user doesn’t close it first), you want to shut it again after a delay of x seconds.

Did I get that right?

Thanks for the quick response!

Correct, I would like to remove the close button, have the modal window popup as it does but then have it close after x number of seconds.

I didn’t want to post my url in case it was considered advertising :slight_smile:

Ok. What have you got so far?
Could you put your code in a JSFiddle or something?

I simply used the code you provided in post #3, I…pulled down the files (jquery.min.js, jquery.colorbox.js and colorbox.css) and have a test page on my server.

Ok. This will do what you want.
The popup will open after 5 seconds, there will be no close button and it will close again after 5 seconds.

It does sound however, like you are trying to force me to view something when I can access your site.
Is this really necessary? It is a great way to lose visitors / potential customers.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>ColorBox demo</title>
    <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
  </head>
  <body>
    <h1>Hello, there!</h1>
    <h2>This is some content</h2>
    <p>The popup will open in <span id="seconds">5</span> seconds</p>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
    <script>
      function openColorBox(){
        $.colorbox({
          iframe:true,
          width:"80%",
          height:"80%",
          href: "http://www.sitepoint.com",
          onLoad: function() {
            $('#cboxClose').remove();
            setTimeout(function(){
              $(window).colorbox.close();
            }, 5000)
          }
        });
      }

      function countDown(){
        seconds--
        $("#seconds").text(seconds);
        if (seconds === 0){
          openColorBox();
          clearInterval(i);
        }
      }

      var seconds = 5,
          i = setInterval(countDown, 1000);
    </script>
  </body>
</html>

Thank you VERY much! This actually servers a couple purposes…

  1. Allows me to create a nice formatted count down page while presenting a PSA (Childrens Cancer Hospital donation banner).
  2. Will allow the underlying .SWF file time load (game file).

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.