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

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?

web site load open colorbox banner image add external link url visitor please ?

image and url example

<a href="http://www.site.com/bannerurl.html" target="_blank"><img src="http://www.site.com/wp-content/uploads/haziran.gif" ></a>

my code

  <script>
  	var jq = $.noConflict();
    function openColorBox(){
      jq.colorbox({
        iframe:false,
		innerWidth:800, 
        innerHeight:600, 
        maxWidth:'95%',
        maxHeight:'95%',
        escKey: false,
        loop: false,
        scrolling: false,
        overlayClose: false,
       href: "http://www.site.com/wp-content/uploads/haziran.gif"
      });
    }
setTimeout(openColorBox, 1000);
setTimeout(function(){ window.parent.jq.colorbox.close(); }, 100000);
</script>
1 Like

A post was split to a new topic: I need a pop-up for Blogspot

Sir,
Can I set limits for this popup?
Like, I want to show it for 10sec and then it’ll close automatically.
Thanks in advance.

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

It works.
Thank You Sir.
You are so helpful. :slight_smile:

2 Likes

is there any way to get a link from a button inside the colorbox and i need the link href to outside the popup window

Sorry, I don’t follow. Could you rephrase your question.

Also, please provide some code — what have you tried and what isn’t working?