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

Hi,

So you want a popup to open a few seconds after the page has loaded and display text, as opposed to an iframe. Did I get that right?

You know that pop ups are bad for SEO?

Hi Pullo,

What to do, If I want close button (X) at the top right instead of bottom right? Please suggest

What do you have so far in the way of code?
Please post something runnable (for example in a JSFiddle).

I have the same question. I have a wordpress popup that needs an X to close the page for visitors. is it a different type of code if it’s wordpress?

It’s all JavaScript.
Also, if you’re looking for help troubleshooting whichever issue you are having, pls post some runnable code.

i took over the site from someone else so its been a struggle.

[timed ondate="20130812" offdate="20200915" ontime="0001" offtime="0010"]
<div><a class="fancyload" href="/coupons/popup18.jpg">HAROLD WANTS YOU TO ENJOY YET ANOTHER GREAT DEAL</a></div>
[/timed]

the website is http://seltzerssteakhouse.com

That’s a WP short code for (presumably) the fancybox plugin.
Do you have the possibility to set 'closeBtn': true in the plugins options?

Hello Pullo your code color box is perfect in my project . Could you please tell me how do I insert an Interval function in order to repeat the popup each 15 minutes. Just if it’s possible.

Appreciate

Edward

Here’is my example using your code
http://www.radio4me.online/livepopuptimed.html

Hey,

I guess you could use setInterval.

var fifteenMinutes = 1000 * 60 * 15;
var i = setInterval(function(){
  // this will be called every 15 minutes
}, fifteenMinutes);

To cancel:

clearTimeout(i);

Hi Pullo , me again … really I do not much about Javascript , could you please insert your code in my file that I sending you ?
Thank you and sorry to ask you again.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
<!--
function popup(url) 
{
 params  = 'width='+screen.width;
 params += ', height='+screen.height;
 params += ', top=0, left=0'
 params += ', fullscreen=yes';

 newwin=window.open(url,'windowname4', params);
 if (window.focus) {newwin.focus()}
 return false;
}
// -->
</script>
<script src="jquery.js"></script>
<script src="audioplayer.js"></script>
<script>
    $( function()
    {
        $( 'audio' ).audioPlayer();
    });
</script>
<meta charset=utf-8 />
<title>ColorBox demo</title>
<style type="text/css">
<!--
.style1 {font-size: 18px}
.style2 {font-size: 24px}
-->
</style>
<a href="javascript:window.close()"></a>

<p align="center">

<p align="center"><br> 
  <audio id="main_audio" src="http://sc-classrock.1.fm:8200" preload="auto" autoplay="autoplay" controls></audio>
<p align="center">
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
    <style type="text/css">
<!--
.style1 {font-size: 36px}
-->
    </style>
</head>
<body>
    <h1>Hello, there!</h1>
    <h2>&nbsp;</h2>
  <p>The <span class="style2">popup advertising</span> will open in <span id="seconds">5</span> seconds</p>
    <p class="style1">RADIO LIVE 1 </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:"40%",
          height:"80%",
          href: "http://www.radio4me.online/80.html",
          onLoad: function() {
            $('#cboxClose').remove();
            document.getElementById("main_audio").volume = 0.2;
            setTimeout(function(){
              $(window).colorbox.close();
              document.getElementById("main_audio").volume =1;
            }, 30000)
          }
        });
      }

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

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

First thing is this:

var seconds = 10,
    i = setInterval(countDown, 2000);

This will make the popup open in 20 seconds. If that is what you want write:

var seconds = 20,
    i = setInterval(countDown, 1000);

What you are asking is this:

var seconds = 10,
    fifteenMinutes = 1000 * 60 * 15,
    i = setInterval(countDown, 1000),
    j = setInterval(openColorBox, fifteenMinutes);

This looks like a solution that I need, but I have tried using this code and it doesn’t work. Is there perhaps something missing from this example code?

Nope :slight_smile:

What have you tried? Could you provide some code?

I tried creating the colorbox with cookies so it would only appear once. Below is the code that I am using. I also made sure to get jquery.cookie.js, and I put it in the root folder with the index file and the css file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>ColorBox demo</title>
    <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
    <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>
  </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>
      function openColorBox(){
            $.colorbox({iframe:true, width:"80%", height:"80%", href: "http://www.teotech.com"});
      }
        
      function countDown(){
        seconds--
        $("#seconds").text(seconds);
        if (seconds === 0){
          openColorBox();
          clearInterval(i);
        }
      }
        
      var seconds = 1,
          i = setInterval(countDown, 1000);
      
      if(!$.cookie("colorboxShown")){
        openColorBox();
        $.cookie('colorboxShown',"yes", true, { expires: 1, path: '/' });
      }


    </script>
      
  </body>
    
</html>

Are you running the script locally, or on a server?

Right now I am running it locally

That’s probably why the cookies aren’t working. Try running it on a server.

Hi,

I need to install Colorbox with Google Tag Manager

Do you think it is possible ?

Thanks

Eric

No idea, did you try it?