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


#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.


#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?

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.


#292

Can you use your CMS to make a new page?