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

JavaScript
272

Is there a way to make that popup within the iFrame?

273

If you don’t have control over the content of the frame, then no.

1 Like
275

Please where exactly will I place this code ($.colorbox({ overlayClose: false }):wink: looking at the code you shared initially? Thanks.

276

Hi, it’s explained here:

277

Dear All,

How do i create a hyperlink to another page to the pop up image as per code below? please help :slight_smile:

<meta charset="utf-8" />
<title></title>
<link href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" rel="stylesheet" />
<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:"90%",
          height:"90%",
          href: "http://www.metaltech.com.my/parking4.aspx",
          onLoad: function() {
            $('#cboxClose').add();
            setTimeout(function(){
              $(window).colorbox.close();
            }, 180000)
          }
        });
      }

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

      var seconds = 1,
          i = setInterval(countDown, 1000);
 
    </script>
278

Hi, I’m not sure what you mean by:

Could you elaborate.

279

Hi Pullo

Thank you for replying and sorry for my lack of knowledge and command of english.

My question is:

  1. Can hyperlink the pop up box to another page in my website upon clicking on it?

Your help is truly appreciated.

280

You want the whole popup to be a link, or you want to place a link in the popup?

281

Hi Pullo

I want to place a link in the pop up image itself.

When people click on the image, it will direct them to another page.

Thank you for your kind help.

282

You can do that with an image map.
Here’s a generator you can use: http://imagemap-generator.dariodomi.de/

For example, to make the “Parking Options” box a link, you can do this:

<img src="parking4.jpg" alt="Trade fair parking options" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="Parking Options" href="your/link/here" shape="poly" coords="63,1,63,99,255,102,256,3" />
</map>
283

Dear Pullo

Thank you for your help.

How do I, on the other hand, make the whole popup to be a link?

1296×622 413 KB

When people visit the website, the color box will pop out, i hope to redirect user to another page when clicking on the pop up.

I hope for your kind assistance.

Thank you.

284

If there is just one image in the iframe (which seems to be the case), then wrap it in anchor tags.

285

Dear Pullo

Do you have the code? Because I totally dont know what and how to add the anchor tags

Thank you.

286

Seriously??

<a href="your/link/here">
  <img src="img/path" alt="alt text">
</a>
287

Dear Pullo

Yes, i have 0 knowledge on this, and i just found alot of source through copy-pasting.

If this is my code below:, where should i add in the anchor?

function openColorBox(){ $.colorbox({ iframe:true, width:"90%", height:"90%", href: "http://www.metaltech.com.my/parkingpopup.aspx", onLoad: function() { $('#cboxClose').add(); setTimeout(function(){ $(window).colorbox.close(); }, 180000) } }); } 
  function countDown(){
    seconds--
    $("#seconds").text(seconds);
    if (seconds === 0){
      openColorBox();
      clearInterval(i);
    }
  }

  var seconds = 1,
      i = setInterval(countDown, 1000);
</script>
288

Here: http://www.metaltech.com.my/parkingpopup.aspx

289

Dear Pullo

It is not working. I paste in the anchor like this.

<br />
<meta charset="utf-8" />
<title></title>
<link href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" rel="stylesheet" />
<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:"90%",
          height:"90%",
href: "http://www.metaltech.com.my/parkingpopup.aspx",
**your code here**
          onLoad: function() {
            $('#cboxClose').add();
            setTimeout(function(){
              $(window).colorbox.close();
            }, 180000)
          }
        });
      }

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

      var seconds = 1,
          i = setInterval(countDown, 1000);
    </script>
290

Can you alter this page?
http://www.metaltech.com.my/parkingpopup.aspx

291

Hi Pullo,

How do I alter this page? I uploaded this image into the CMS. And i just copied the live URL and paste it into the color box above.

1142×589 86 KB

292

Can you use your CMS to make a new page?