Changing the display from block to none, Problems in showing div

Question

This is my first question here and I've tried to search for quite some time now and I haven't found any question that is the same as mine or touches the same problem.

I want to do a CSS popup that has a background-div covering the whole website and a centered div showing actual content.

My problem is that only the centered div is showing up when I'm clicking the button that is supposed to show them both. Even when I comment out the display:none - attribute in my css-file, the background div simply doesn't have any color or style attached to it. If I fill it with text, the text shows up on the website where the div is "supposed" to be if there weren't any style sheet attached to it.

I've gotten the code from coders answer in this question.

Here it is:

Script:

$("#btn-update").click(function() {
        document.getElementById("light").style.display="block";
        document.getElementById("blackground").style.display="block";
});

html:

<button type="button" id="btn-update">Button!</button>
<div id="light" class="white_content">This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="blackground" class="black_overlay"></div>

CSS:

.black_overlay{
    /*display: none;*/
    position: absolute;
    top: 10%;
    left: 10%;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index:1001;
    /*-moz-opacity: 0.8;*/
    /*opacity:.80;*/
    /*filter: alpha(opacity=80);*/
}
.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 15%;
    height: 15%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

Here's the fiddle-demo so you can play around as well

I've tried changing the attributes, commenting them out, making the div visible from the get go but it always seems to not show properly (while the white_content always do).

Also: the JS-fiddle is having problems showing the white content, but the black overlay is showing just fine when you remove the display:none attribute.

Thank you so much in advance for any help. Been stuck for a while now

You should select the jquery library as framework (dropdown left side) in order to use it. — axel.michel, Jan 31 '14 at 08:22

dhana · Accepted Answer · 2014-01-31T09:13:44.860

2

You need to attach the jquery plugin in jsfiddle http://jsfiddle.net/dhana36/K57DH/12/

After update http://jsfiddle.net/dhana36/K57DH/20/

UPDATE:

HTML CODE:

<!DOCTYPE html>
<html>
<head>
<style>
.black_overlay{
/*    display: none;*/
    position: absolute;
    top: 10%;
    left: 10%;
    width: 50%;
    height: 50%;
    background-color: #000000;
    z-index:1001;
/*    -moz-opacity: 0.8;*/
/*    opacity:.80;*/
/*    filter: alpha(opacity=80);*/
}
.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 15%;
    height: 15%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn-update").click(function() {
    document.getElementById("light").style.display="block";
    document.getElementById("blackground").style.display="none";
    //document.getElementById("blackground").style.background-color="#555555";
});
});
</script>
</head>
<body>
<div id="light" class="white_content">
    This is the lightbox content.
    <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('blackground').style.display='block'">
        Close
    </a>
</div>
<div id="blackground" class="black_overlay"></div>

<button type="button" id="btn-update">Button!</button>
</body>
</html>

edited Jan 31 '14 at 09:13

answered Jan 31 '14 at 08:22

dhana

6,487
4
40
63

Thanks, now it works in fiddle. But not in my chrome browser. Any ideas? Is it just one of those browser-issues where it works in one but not the other? – Avslutarn Jan 31 '14 at 08:25
I was checked your code in chrome. It is working fine. – dhana Jan 31 '14 at 08:26
1

@Avslutarn They mean put `` in your ``. – Ruddy Jan 31 '14 at 08:29
I have the jquery script included in my section. But the background still won't show up for some reason. @dhana I would like to but I'm still at square one – Avslutarn Jan 31 '14 at 08:40
@Avslutarn run the page in chrome browser and press the F12 and open the console. It gives any error please paste it. – dhana Jan 31 '14 at 08:45
Seems to be the same in firefox, so it seems to be a problem with my code somewhere. – Avslutarn Jan 31 '14 at 08:46
@Avslutarn Are you checking in jsfiddle or in your html page ? – dhana Jan 31 '14 at 08:47
@Avslutarn Put your jquery code inside `$(document).ready(function(){ //your code here});` – dhana Jan 31 '14 at 08:56
@dhana it's already in there. Thanks for sticking with my so far! – Avslutarn Jan 31 '14 at 08:57
@dhana Because my problem isn't solved yet. The black background div still isn't showing. – Avslutarn Jan 31 '14 at 09:00
Even if I change so that the div is supposed to be shown at all times, it still isn't visible. How can I debug so that it shows? When I fill the div with text, the text is shown but not the actual div background color. – Avslutarn Jan 31 '14 at 09:04
@dhana it works great in fiddle, not in my page :/ even when I set it to display:block and simply try to show it, it reacts like background-color and size doesn't exist. It's impossible to style it... really weird since the other div works perfectly well. – Avslutarn Jan 31 '14 at 09:11
I just figured it out. I had a comment above the class style .black_overlay that was commented with // instead of /* blabla */. So my class black_overlay never really existed... Not it works, thanks for your help @dhana. Much appreciated! – Avslutarn Jan 31 '14 at 09:14
@Avslutarn I have updated my answer. Please paste the code in simple html page. – dhana Jan 31 '14 at 09:15

score 0 · Answer 2 · answered Jan 31 '14 at 08:29

0

Add the script before closing </body> not inside </head> Same code doesn't work when wrapped inside head http://jsfiddle.net/K57DH/18/ edit in left panel

answered Jan 31 '14 at 08:29

VenomVendor

15,064
13
65
96

Changing the display from block to none, Problems in showing div

2 Answers2