Simple Popup Window in JavaScript

JavaScript
1

Hello There,

I’m looking for a simple popup that can be displayed after 10 seconds of someone being on the page, but only appearing once per customer once a day.

I have come across this code that was previously posted on a separate thread, the popup works exactly how i want it, apart from it’s an iFrame, I was looking for inline content if possible, that can be easily changed.

<!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>

Hope this makes sense.

Thanks,
Niall

2

According to docs, that line can be changed to:

$.colorbox({html: '<div>your html here</div>'});
3

Thanks very much.

I’m not too worried about using the colourbox code, is there a simple javascript/css popup option that you may know off that would be just as effective?

Thanks,
Niall

4

Of course, you can simply create an absolute positioned div and show it with pure javascript:

document.getElementById('#popup-div-id').style.display = 'block';
5

How would i get that to appear after about 10 seconds from page load?

Thanks,
Niall

6 
setTimeout(function(){
    document.getElementById('#popup-div-id').style.display = 'block';
}, 10000); // 10000 is delay in milliseconds, 1s = 1000ms
7

I appreciate the help, I’m quite new to JavaScript so apologies about the silly questions.

I have this code but it doesn’t seem to work (I’m trying it on a basic html document first before moving it to my website)

<html>
 <head>
  <meta charset=utf-8 />
    <title>ColorBox demo</title>
    <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
     <style>
        #popup-div-id {
           position: absolute;
       }
     </style>
   </head>

   <body>
     <div id="popup-div-id">
       <h1>Test</h1>
       <p>Test</p>
     </div>
  <script>
      setTimeout(function(){
      document.getElementById('#popup-div-id').style.display = 'block';
      }, 10000); // 10000 is delay in milliseconds, 1s = 1000ms
  </script>
 </body>
</html>

Thanks for your help so far,
Niall

8

Here is live example: http://jsfiddle.net/gdbyh8fz/
I made 2s delay there

9

Thanks very much!

Really appreciate the help and will be sure to use that.

Regards,
Niall

10

I got another quick question if you don’t mind Megazoid.

The code you have given me was excellent and i have no implemented it on our test server, the only issue is due to how the website is built i had to put the code on a php file, meaning the ad appears on every page…

Is it possible that so once the ad appear for someone, it will save it as a cookie and won’t appear for another 24 hours or something like that?

Thanks,
Niall

11

Here is it http://jsfiddle.net/gdbyh8fz/2/
Popup will not be shown for the next 24 hours

12

Thank you very much,

Worked perfectly, If only i could understand what you wrote there!!

Excellent! You my friend, are a genius!

13

I added some comments here, they might help http://jsfiddle.net/gdbyh8fz/3/

Haha, no, sure I’m not. This is not a rocket science, anyone can learn JavaScript, who really wants to.

14

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