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

thanks Mittineague :smile:

Ok, well a few errors in the validator is a considerable improvement on what we started with, so I guess we’ll call it a day with that.

Could you repeat your original question regarding the search box?

Yes sure.
First of all it’s giving me an error jQuery not defined but anyway it works.

The problem is restyling it as there’s a javascript controlling the iframe size.

Ah yeah, I remember now.
Could you do me a favour: start a new topic, clearly stating the problem and then let me know.

Sure thing, thanks

link is Searchbox iframe resizing and styling depending on Javascript

I moved 6 posts to a new topic: How to have a popup window open and close automatically

Hi,

I am not great when it comes to code but how would I get the popup to just display text?
Thanks.

Well, as you would do with any other HTML. Simply use the appropriate tags ( like P, as an example) and write the text :wink:

A modal popup is just a div (most of the time) and the HTML inside it.

Thank you for your response below is the original code. Where would I put what you have suggested and remove the sitepoint link, I have tried adding the p tag with what I want to say but I keep getting syntax errors.

<script>
  function openColorBox(){
    $.colorbox({iframe:true, width:"80%", height:"80%", href: "http://www.sitepoint.com"});
  }
  
  setTimeout(openColorBox, 5000);
</script>

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>