Jquery onclick add background overlay for output

Question

I am currently working on a simple output for a script based website that I found somewhere on SO. Now I want to add a background overlay to an existing function, but I don’t know how and where I should call it.

Here is a pull script.

http://jsfiddle.net/hr9bymj1/

and this is a function

$(function () { $("#clickme").click(function () { if ($(this).parent().hasClass("popped")) { $(this).parent().animate({ left: '-400px' }, { queue: false, duration: 500 }).removeClass("popped"); } else { $(this).parent().animate({ left: "0px" }, { queue: false, duration: 500 }).addClass("popped"); } }); }); 

I tried some methods found on the Internet, but I cannot combine the click event corerectly with the addition of a div, so I am stuck and try to help here.

Thanks!

Answer 1

Try it.

Add another div with the overlay class:

 <div class="overlay"> </div> <div id="slideout"> <div id="slidecontent"> I am the content. I am the king! </div> <div id="clickme"> </div> </div> 

Update jQuery accordingly:

 $(function () { $("#clickme").click(function () { if($(this).parent().hasClass("popped")){ $(this).parent().animate({left:'-400px'}, {queue: false, duration: 500}).removeClass("popped"); $(".overlay").fadeOut(500); //hide overlay on popin }else { $(this).parent().animate({left: "0px" }, {queue: false, duration: 500}).addClass("popped"); $(".overlay").fadeIn(500); //show overlay on popout } }); }); 

Demo

Answer 2

You can use the :before pseudo-class on #slideout so that it #slideout entire page and appears only when #slideout - .popped

Check out the demo

 $(function () { $("#clickme").click(function () { if($(this).parent().hasClass("popped")){ $(this).parent().animate({left:'-400px'}, {queue: false, duration: 500}).removeClass("popped"); }else { $(this).parent().animate({left: "0px" }, {queue: false, duration: 500}).addClass("popped"); } }); }); 

 #slideout { background: #f4f4f4; position: absolute; width: 400px; height: 150px; top: 30%; left:-400px; padding-left: 0; } /*the overlay bellow*/ #slideout:before{ content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.5); z-index: -1; opacity: 0; visibility: hidden; transition: all .5s ease-in-out; } #slideout.popped:before{ opacity: 1; visibility: visible; } #clickme { position: absolute; top: 0; right: -20px; height: 20px; width: 20px; background: tomato; cursor: pointer; } #slidecontent { float:left; padding: 35px; } .overlay { background-color: #000; bottom: 0; display: none; left: 0; opacity: 0.5; filter: alpha(opacity = 50); /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 49; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="slideout"> <div id="slidecontent"> I am the content. I am the king! </div> <div id="clickme"> </div> </div> 

Answer 3

You can create a new class in css with a background image and add the class to the body when you click Fiddle

 $(function () { $("#clickme").click(function () { if($(this).parent().hasClass("popped")){ $(this).parent().animate({left:'-400px'}, {queue: false, duration: 500}).removeClass("popped"); $('body').removeClass("bg"); }else { $(this).parent().animate({left: "0px" }, {queue: false, duration: 500}).addClass("popped"); $('body').addClass('bg'); } }); }); 

 .bg{ background:url('http://placekitten.com/300/301') ; } #slideout { background: #f4f4f4; position: absolute; width: 400px; height: 150px; top: 30%; left:-400px; padding-left: 0; z-index: 50; } #clickme { position: absolute; top: 0; right: -20px; height: 20px; width: 20px; background: tomato; cursor: pointer; } #slidecontent { float:left; padding: 35px; } .overlay { background-color: #000; bottom: 0; display: none; left: 0; opacity: 0.5; filter: alpha(opacity = 50); /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 49; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div id="slideout"> <div id="slidecontent"> I am the content. I am the king! </div> <div id="clickme"> </div> </div>