jquery onclick add background overlay for pullout

Question

I am currently working on a simple pullout for a website based on a script I found somewhere on SO. Now I want to add a background overlay to the existing function, but I don't know how and where I have to call it.

Here is the fiddle of the pullout.

http://jsfiddle.net/hr9bymj1/

and this is the 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 have tried some methods found in the internet, but I am not able to combine the click event corerectly with the append div and so I am stuck and trying to ask for help here.

Thank you!

Answer 1

Try like this.

Add another div with 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