0

I am a novice at this.

I made a demo here: http://jsbin.com/vajafidu/1/edit

But there is something wrong with the code that prevents it from working.

All I want to do is

  • the background would fade to black after clicking the button.
  • the black background will fade out again clicking the button second time.

Should be easy to do but I think there is some bugs in the codes. Thanks for any helpful advice!!!

HTML

<a href="#" class="btn btn-default" data-toggle="active"> Button </a>
<div id="overlay"></div>

CSS

#overlay {
    width: 100%;
    height : 100%;
    opacity : 0;
    background: '#000';
    top: 0;
    left: 0;
    transition: opacity .25s;
    -moz-transition: opacity .25s;
    -webkit-transition: opacity .25s;
}
.backdrop {
    opacity: .4 !important;
}

JS/jQ

$(document).ready(function() {
  function toggle() {
    $('#overlay').toggleClass('backdrop');
    }
  $('[data-toggle="active"]').click(toggle);
});
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
Wiley Ng
  • 307
  • 3
  • 14

1 Answers1

1

Your code works, it's just that you need to fix your elements and CSS:

jsBin demo

<div id="overlay"></div>    <!-- Inversed the order ad made btn absolute -->
<a  style="position:absolute;" href="#" class="btn btn-default" data-toggle="active"> Button </a


#overlay {
    position:absolute;
    width: 100%;
    height : 100%;
    background: #000;
    top: 0;
    left: 0;

    opacity:0;
    transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    -webkit-transition: opacity 0.25s;
}
.backdrop {
    opacity: 0.4 !important;
}
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • http://jsbin.com/limiyisi/1/ it appears to me that the black fadein background couldn't reach to the very bottom of the page. What do you suggest is the solution? Thanks!! – Wiley Ng Jul 27 '14 at 17:39
  • @WileyNg something like this? http://jsbin.com/limiyisi/3/edit otherwise you want to make your overlay position: fixed? – Roko C. Buljan Jul 27 '14 at 18:08