jquery onclick为拉出添加背景叠加

Question

我目前正在基于我在SO上找到的脚本为网站进行简单的拉出。现在我想为现有功能添加背景覆盖，但我不知道如何以及在何处调用它。

这是拉出的小提琴。

http://jsfiddle.net/hr9bymj1/

这是函数

 $(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");
        }
    });
});

我已尝试过在互联网上找到的一些方法，但我无法将click事件与append div结合使用，因此我陷入困境并试图在这里寻求帮助。

谢谢！

Answer 1

试试这样。

使用叠加层添加另一个div：

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

相应地更新jQuery：

$(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

您可以在:before上使用#slideout伪类，这样它就会覆盖所有页面，只有在#slideout为.popped

查看 demo here

＆＃13;

＆＃13;

$(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");
        }
    });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用背景图片在css中创建一个新类，并在单击时将该类添加到正文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>