CODEWITHSUNDEEP
javascriptjquerycsshtml
Avslutarn
Avslutarn

Reputation: 113

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

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

Upvotes: 0

Views: 2994

Answers (2)

dhana
dhana

Reputation: 6525

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>

Upvotes: 2

VenomVendor
VenomVendor

Reputation: 15382

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

Upvotes: 0

Related Questions