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

Hi,

I need a simple popup script that will let me popup ads on my website.
After hours of searching, I can’t believe I can’t find one good, simple solution for me.

  • I need something that loads on page-load (after a delay of a few secs) [and not on link/image-click]
  • Will allow me to load content via iFrame (i.e not inline content, preferably)
  • Smooth, fast & clean looking - preferably one like the jQuery lightbox popups which look so cool
  • If possible, have cookies to load only once

[Willing to pay for it, just send me a PM or reply here]

All the modal pop-ups I find online load only on link-clicks. I was trying Magnific-popups, but customizing it to my needs seems too difficult. Right now, I have managed to load a test page as a popup - but the size of the popup is full-screen and it looks horrible.

If somebody can just give me code where - all I do is - add the href for the popup content and add the code to my website, I would be really thankful. Don’t have a huge budget, but this is urgent. PM me a quote if you can do it.

OR, kindly let me know if there are any softwares (popup generators) that can help me do this. There seems to be a huge vaccum in this area in the market.

Note: This topic has proven so popular that I have published an article about it over on SitePoint’s JS channel: Quick-Tip: Show Modal Popup after Time Delay


Hi,

Welcome to the forums :slight_smile:

Colorbox can do what you need.
It looks good, can display an iframe and can be set that it can fire a few seconds after page load.
Cookies should also be possible.

Here’s a demo (minus cookies) that you can copy and run on your PC.
Is this the kind of thing you want?

<!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 five 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"});
      }
      
      setTimeout(openColorBox, 5000);
    </script>
  </body>
</html>

With countdown:

<!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"});
      }
      
      function countDown(){
        seconds--
        $("#seconds").text(seconds);
        if (seconds === 0){
          openColorBox();
          clearInterval(i);
        }
      }

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

Thanks a looot. This is just what I was looking for.
Is there any way of preventing the popup from closing when we click outside the popup (and only close when the ‘close’ button is pressed)?

And can I have your paypal email?

Sure, there’s an option for that:

$.colorbox({ overlayClose: false });

That’s really not necessary, but thank you!
If you are looking to hire developers, head on over to Flippa.
All advice of the forums is 100% free :slight_smile:

Hey,

I would suggest you to take a look at Popup architect. Its a popup generator for lead-capture popups with the functions that you need.

Hi, the code is very good.
But I want to ask, are there any ways that able to limit the popup only show maximum one times per day?

Sure, but how you would do this depends on exactly what you mean.
In it’s simplest form, I would set a cookie which was valid for 24 hours, then check for the cookie’s presence on page load.

Yeah, i did it.
Many thanks!!
Your example is very very good… !!

Hi, I’m new to this forum and I’m looking for the exact same thing. I was following along until this last post. Is there a final code with the cookie component added in? Any help would be very much appreciated.

Hi,

You could do something like this (assumes you areusing jquery.cookie):

<!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 five 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 src="jquery.cookie.js"></script>

    <script>
      function openColorBox(){
        $.colorbox({iframe:true, width:"80%", height:"80%", href: "http://www.sitepoint.com"});
      }
      
      if(!$.cookie("colorboxShown")){
        openColorBox();
        $.cookie('colorboxShown', true, { expires: 1, path: '/' });
      }
    </script>
  </body>
</html>

Thank you so much for the quick response. Appreciated.

Hi,
i am using this:
try it :slight_smile:

    
&lt;script&gt;
        $(document).ready(function () {
            if (document.cookie.indexOf('visited=true') == -1) {
                var oneDay = 1000 * 60 * 60 * 24 * 1;
                var expires = new Date((new Date()).valueOf() + oneDay);
                document.cookie = "visited=true;expires=" + expires.toUTCString();
                setTimeout(openColorBox, 3000);
            }

            function openColorBox() {
                $.colorbox({ html: "&lt;iframe src=\\"\\"&gt;&lt;/iframe&gt;", fixed: true });
            }
        });
    &lt;/script&gt;

Hi, I am new to this forum, but this thread was just what I was looking for. I do have one question though, how can you have the lightbox close after you hit submiton a signup page? Thanks!

Hi,

Colorbox has a public close method:

$.colorbox.close()

So you could use that.

Pullo,
I am using Colorbox, but I am not sure where would

$.colorbox.close()

get placed in the code?

Hi,

It depends on how you have things set up.

Could you post a minimal example (just the code that demonstrates your problem) of what you have and I’ll take a look.

Here is the code I am using in the index

<script src="http://fredgolfrange.com/colorbox/jquery.min.js"></script>
	<script src="http://www.fredgolfrange.com/colorbox/jquery.colorbox.js"><script>
    <script src="jquery.cookie.js"></script>
<script>
        $(document).ready(function () {
            if (document.cookie.indexOf('signupnewsletters=true') == -1) {
                var nintyDay = 90000 * 60 * 60 * 24 * 1;
                var expires = new Date((new Date()).valueOf() + nintyDay);
                document.cookie = "signupnewsletters=true;expires=" + expires.toUTCString();
                setTimeout(openColorBox, 1000);
            }

            function openColorBox() {
             $.colorbox({iframe:true, width:"80%", height:"80%", href: "http://www.fredgolfrange.com/newsletterhome"});
            }
        });
    </script>

Thank you!

Ok, so you’re displaying your form in an iframe using colorbox.

Say a user fills out the form with their details: wouldn’t it be best to let the form submit, then show some kind of “Submission successful” message, then let the user close the window (rather than closing it straight away)?

This way the user has some feedback, as to what is going on.

If you really, really want to close it automatically, you could do it like this:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Main Page</title>
    <link rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/example1/colorbox.css'>
  </head>
  <body>
    <h1>Main Page!</h1>
    <p>Popup opens after 1 second</p>

    <script src="http://fredgolfrange.com/colorbox/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/jquery.colorbox.js"></script>
    <script>
      function openColorBox() {
        $.colorbox({
          innerWidth:500, 
          innerHeight:300, 
          iframe:true,
          href: "subscribe.html",
          overlayClose:false,
          onLoad: function() {
            $('#cboxClose').remove();
          }
        });
      }
      setTimeout(openColorBox, 1000);
    </script>
  </body>
</html>

subscribe.html (the form):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Subscribe</title>
    <link href="http://fredgolfrange.com/newsletterhome/mailinglist.css" rel="stylesheet" type="text/css" />
  </head>
  <body class="oneColFixCtr">
    <div id="container">
      <h1>My Signup Form</h1>

      <form name="Mail_list" action="save.php" method="post">
        <p>
          <label for="first_name">First Name: </label>
          <input type="text" name="first_name" id="first_name" size="25"  autofocus required />
        </p>
        <p>
          <label for="last_name">Last Name: </label>
          <input type="text" name="last_name" id="last_name" size="25"  required />
        </p>
        <input type="submit" value="Submit Form">
        <input type="reset" value="Reset Form">
      </form> 
    </div>
  </body>
</html>

save.php:

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Success</title>
  </head>
  <body>
    <p>You submitted: </p>
    <?php 
      echo '<pre>'; 
      print_r($_POST);
      echo '</pre>';

      // Do your database stuff here
    ?>

    <script>setTimeout(function(){ window.parent.jQuery.colorbox.close(); }, 1000);</script>
  </body>
</html>

Here’s a demo.

In this example the colorbox window closes 1s after the form has been submitted, but in real life, you’ll want to check that the form values have been saved to the database before allowing it to shut.

You might also find this page useful: http://www.jacklmoore.com/colorbox/faq/#faq-parent

[QUOTE=Pullo;5699652]
Thank you Pullo!
The feedback helped me think of aspects of the code that I would not have thought of. After someone submits the form it goes to a .php file to save then is redirected to a page saying “Thank you”. So, what I did was put the set out function in the redirection file.

Here is my finial code for redirection.html:


<body>
<html>
<body>
<center><h1>Thank you!!</h1></center>

    <script>setTimeout(function(){ window.parent.jQuery.colorbox.close(); }, 3000);</script>

</body>
</html>

By putting the setout function in redirection.html the Colorbox wouldn’t close till after the visiter has filled out the form and it had time to save, making it the last function to happen.