Javascript/HTML/CSS popup

Question

I'm working on a popup using a hidden DIV and loading it with window.onload. As well as this I'm also loading an empty DIV with a overlay CSS style (to fill the background behind the popup with a semi-transparent black). And finally to top it off there is a close button in the top right corner of the popup.

I've scanned through SA and a couple of forums (as this is the first time I do something like this with JS) & have got most of the code from there. Yet when adding it all together, something's stopping it from working, I've been staring at this for a day now and maybe I'm just missing something really obvious?

The site is here: http://0034.eu/townapp/

And here's the code:

The JS:

<script type="text/javascript">
function show_popup()
{
  document.getElementById('popup').style.display = 'block'; 
}
window.onload = show_popup;
</script>

<script language="text/javascript">
window.onload = function() {
   $('#overlay-back').fadeIn(500);
}
</script>

<script language="javascript">
$(".close-image").click(function() {
$(this).parent().hide();
});
</script>

The HTML:

<body>
<div id="overlay-back"></div>
<div id="popup"><img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" /></span></div>

The CSS:

    #popup{
position:absolute;
display:hidden;
top:200px;
left:50%;
width:400px;
height:566;
margin-left:-250px;
background-color:white;
}
    #overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none
}
    .close-image{
display: block;
float:right;
position:relative;
top:-10px;
right: -10px;
height: 20px;
}

Thanks a lot in advance!

Did you included the jquery framework in your head section? – Mihai Matei Jul 12 '13 at 07:55 — Mihai Matei, Jul 12 '13 at 07:55

Mihai Matei · Accepted Answer · 2013-07-12T13:13:31.557

2

You must include jquery for this to work

<head>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script>
      // you can use just jquery for this
      $(document).ready(function(){
         $('#overlay-back').fadeIn(500,function(){
            $('#popup').show();
         });

         $(".close-image").on('click', function() {
            $('#popup').hide();
            $('#overlay-back').fadeOut(500);
         });
      });
   </script>
</head>

edited Jul 12 '13 at 13:13

answered Jul 12 '13 at 08:00

Mihai Matei

24,166
5
32
50

Matei is correct, and has refactored your code nicely for you. And remember to try not to include JS in the `` - place it at the bottom of your HTML before the closing `` tag so that it loads lastly in the DOM, see accepted answer here: http://stackoverflow.com/questions/11786915/javascript-on-the-bottom-of-the-page – Nick Bull Jul 12 '13 at 08:15
Thanks for that @matei - I've applied this yet still doesn't seem to be working 100%? I do see dark overlay now (but it also goes over the advert). And close button still has no functionality :( – Brad Adams Jul 12 '13 at 08:39
@NickBull Inside the body tag? I've tried this and it seems the Jquery stops working? – Brad Adams Jul 12 '13 at 08:41
Yup, right before the `
` tag, just copy and paste everything between the `
` tags of Matei's answer. If the close button isn't working, try the edit I've made to Matei's answer. **EDIT** until it's been approved, I've changed the $(this).parent.hide() to $('#popup').hide(). Test that out, that should fix your close button.
– Nick Bull Jul 12 '13 at 08:43
I see, ok moved to before `
` . Also I've updated that bit of the script and still not working. The popup seems to be behind the overlay?
– Brad Adams Jul 12 '13 at 08:48
Try either swapping the overlay and the other div in the HTML like this: `

` Or try to give the overlay the style of `z-index: -1;` – Nick Bull Jul 12 '13 at 08:54
Your `z-index: -1;`seems to have got me closer to what I need - although it doesn't cover my header
(even though it's before it?). Also - any ideas how I can remove the white space above my image yet keep the X there? If I reduce height in the CSS it shrinks the X, and `background-color:transparent` doesn't work either.
– Brad Adams Jul 12 '13 at 09:14
Thanks a lot to @NickBull for the input on @MateiMihai's answer. I ended up setting `z-index:10` for the overlay & `z-index:11` on the popup. :) – Brad Adams Jul 12 '13 at 10:41

score 0 · Answer 2 · answered Jul 12 '13 at 08:00

0

If you want to try another popup, the following link will help you, http://blog.theonlytutorials.com/a-very-simple-jquery-popup-ready-to-use-code/

answered Jul 12 '13 at 08:00

n8coder

691
4
12

Javascript/HTML/CSS popup

2 Answers2