Need a simple popup (modal, on-page-load with time-delay, fast & clean)

JavaScript
182

Yeah, you can do that:

<!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">1</span> second</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 src="jquery.cookie.js"></script>
    <script>
      function openColorBox () {
        $.colorbox({iframe: true, width: '80%', height: '80%', href: 'http://www.sitepoint.com'})
        setTimeout(function () { $(window).colorbox.close() }, 10000)
      }

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

      var seconds = 1
      var i = setInterval(countDown, 1000)

      if (!$.cookie('colorboxShown')) {
        openColorBox()
        $.cookie('colorboxShown', 'yes', true, { expires: 1, path: '/' })
      }
    </script>
  </body>
</html>

This is the line that closes the colorbox:

setTimeout(function () { $(window).colorbox.close() }, 10000)

See here for more details: How to have a popup window open and close automatically