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

JavaScript
207

Mr pullo?

208

Hello Sir/Friends i want to set cookies for a popup div, i am not a
professional java or jquery coder.
so please help to setting up cookies for a popup div and also if you
can please tell me how can i set days for it…
thanks in advance… the code is below :

<!-- Welcome Message  -->
<style>.cookie-notification-jc > div {background: none repeat scroll 0 0 #FFFFFF;border: 0 solid #FF0000;bottom: 10px;box-shadow: 0 0 15px #000000;float: right;padding: 30px 15px 15px;position: absolute;right: 10px;width: 260px !important;}.bottom {bottom: 0;left: 0;position: fixed;right: 0;}.cookie-notification-jc {color: #FFFFFF;display: block;height: 100%;left: 0;line-height: 1.4em;padding: 0;position: fixed;top: 0;z-index: 1000000;}.cookie-notification-jc-accept {background: url("http://www.bitc.ie/wp-content/themes/bitc2013/images/closebox.png") no-repeat scroll left top rgba(0, 0, 0, 0);float: left;font-size: 0;height: 30px;left: -33px;margin-right: -30px;overflow: hidden;padding: 0;position: relative;text-indent: -50em;top: -43px;width: 30px;}.cookie-notification-jc-details {color: #EC068D;font-size: 0.9em;padding: 0;transition-duration:1s;}.cookie-notification-jc-details a {color: #BBBBBB;text-decoration: none;color: #ED2025;}.cookie-notification-jc-details a:hover {color: #FFA900;}</style>
<script>function closeBox(toClose) {document.getElementById(toClose).style.display = "none";}</script>
<div id="cookie-notification-jc" class="cookie-notification-jc bottom" style="background-color: rgba(30, 30, 30, 0.2);">
    <div style="width:95%; margin: 0 auto;">
    <span style="cursor: pointer;" onclick="closeBox('cookie-notification-jc'); return false;" class="cookie-notification-jc-accept">Continue</span>
        <h2 style="margin: -5px 0px 0px ! important; font-weight: bold; color: black; float: right; direction: rtl;">my site</h2><br>
           <p style="color: rgb(112, 112, 112); float: right; direction: rtl;">welcome<br><br>
        <span class="cookie-notification-jc-details"><a href="http://aryan-pc.blog.ir">enter</a></span>
        <span class="cookie-notification-jc-details"> - </span>
        <span class="cookie-notification-jc-details"><a href="http://aryan-pc.blog.ir/page/Friends">Link Exchange</a></span>
        </p>
    </div>
</div>
<!-- end of Welcome Message  -->
209

hello sir,
how can i use a javascript variable in php.
ineed to pass the javascript variable in html anchor tag.

210

One way of passing a variable from JavaScript to a PHP script is using Ajax.

This also works with anchor tags

211

can you give me the ajax code

212

Sorry, but simply asking for the solution without having put in any research or even attempted to define, let alone solve your problem will not get you very far. So no, I can’t.

However, if you would like to do a little more research, ask a concrete question (with code samples), then I’m more than happy to help.

2 Likes
213

Hi,

I use this color box to display a one image, and I add it successfully. It works really well on IE. But I have a question,

  1. How to display only the picture not the box? or change the color of the box to match the picture.
  2. When i click on top of the picture it’s not close it self. I want to close the picture when they click on any where on the browser. How to archive this? (I don’t want close button or any descriptions.)
  3. Also how to load when page load with out a timer?

Thank you,
Thameera

214

Can you provide the code you have so far as a runnable example. Preferably in JSFiddle.

215 
<link rel="stylesheet" href="colorbox.css" />
<script src="jquery.min.js"></script>
<script src="jquery.colorbox.js"></script>
<script>
  function openColorBox(){
    $.colorbox({iframe:false, href: "/images/respect.gif"});
  }

  setTimeout(openColorBox, 1000);
</script>

I add this code to one of our website, which develop by a vendor. Website develop on codeigniter and I add this on the home page.

216

Please don’t make me think. Can you provide a runnable example.

1 Like
217

Hi,

Sorry Please find the link web

218

Ok, so when you say “only the picture not the box” do you mean the overlay? I don’t see a box around the image (the overlay is the dark background behind the image).

219

Sorry I was changing the CSS when you load the website. I change the cboxTopRight,cboxTopLeft etc in the CSS file to use black color, but i don’t want to change as I’m planing to use the same color box in future for another purpose. Will it be possible to disable the cbox property?

Also how to add close picture when click on top of it?

Sorry for bad English.

220

You can close colorbox programatically using $().colorbox.close(); I just had a look at implementing this on the page you link to but unfortunately, it is a total mess. The doc type and the entire <head> section of the website is missing and there are several errors in the console which will halt the execution of any JavaScript I may add.

Don’t be sorry for your English. It’s fine :slight_smile: Do be sorry for not making a simple demo (e.g. in JSFiddle) that I can run on my computer that demonstrates the problem you are having.

221

I have used your code. It is so clean and helpful. It works fine in desktop. But in mobile the popup image is not showing properly. will it be possible to show the popup image with only cross button, no frame? Then it will be so that I want.
http://rumpa07cse.com/popup/

222

Hi,

I do agree I should have use proper working version. This webpage developed with Codeigniter(PHP), so i’m confused with the structure as well. I finally manage to do working code. test

Thank you very much. Your code helps me a lot. :clap:

1 Like
223

If you look at thameerakn’s link, they have managed to remove the frame/cross etc from the popup. You should be able to copy that.

224

Hey everyone,

Note: This topic has proven so popular that I have published an article about it over on SitePoint’s JS channel: Quick-Tip: Show Modal Popup after Time Delay

1 Like
225

howdy,
i need your help on something and i appreciate if you help me out,
i wanna use the script down below for my home page, i need it to show the pop up right after the page load

" $(‘element_to_pop_up’).bPopup({
content:‘image’, //‘ajax’, ‘iframe’ or ‘image’
contentContainer:‘.content’,
loadUrl:‘image.jpg’
});
"

but i dont know how to use it right and how and where should i put it in. let me know if u can help me out.

also u can watch the demo version here : “http://dinbror.dk/bpopup/” and the title is “Example 5b, content: Simple jQuery popup that loads an image (Image popup)”

226

I’d check if that library has a $.open() method, if not attach it to a button or something, then trigger a click on whatever element it is attached to:

$(myButton).trigger("click");