CODEWITHSUNDEEP
jqueryhtmlcss
onTheInternet
onTheInternet

Reputation: 7253

jquery overlay not working

Fiddle

I have a simple overlay contact box that uses CSS and Jquery to work.

The actual box drops down just like I want. But the div containing the transparent black background isn't displaying and I'm not sure why.

Its probably something simple that I'm not noticing. Here is my code

HTML

<div class="overlay" id="overlay"></div>
<div class="box" id="box">
    <a class="boxclose" id="boxclose"></a>
    <h2>Get in touch</h2>
    <p>
        Talk to me
    </p>
</div>

CSS

.overlay{
    background-color:black;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:100;

}

.box{
    position:fixed;
    top:-200px;
    left:30%;
    right:30%;
    background-color:#fff;
    color:#7F7F7F;
    padding:20px;
     border:2px solid #ccc;
    -moz-border-radius: 20px;
    -webkit-border-radius:20px;
    -khtml-border-radius:20px;
    -moz-box-shadow: 0 1px 5px #333;
    -webkit-box-shadow: 0 1px 5px #333;
    z-index:101;
}

a.boxclose{
    float:right;
    width:26px;
    height:26px;
    background:url(../img/cancel.png)repeat top left;
    margin-top:-30px;
    margin-right:-30px;
    cursor:pointer;

}

And finally, Jquery

<script>
    $(function () {
        $('#activator').click(function () {
            $('#overlay').fadeIn('fast', function () {
                $('#box').animate({ 'top': '160px' }, 500);
            });
        });
        $('#boxclose').click(function () {
            $('#box').animate({ 'top': '-200px' }, 500, function () {
                $('#overlay').fadeOut('fast');
            });
        });

    });
</script>

Upvotes: 2

Views: 965

Answers (1)

j08691
j08691

Reputation: 207891

z-index only applies to positioned elements. So for example, give your overlay a position of absolute. However, you'll notice that when you do, you have a new problem, so set it to initially be hidden with display:none.

.overlay {
    background-color:black;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:100;
    position:absolute;
    display:none;
}

jsFiddle example

Upvotes: 2

Related Questions