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

我已经尝试了一些在互联网上找到的方法，但我无法将点击事件与附加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
        }
    });
});

演示

Answer 2

你可以在

#slideout上使用:before伪类，这样它就会覆盖所有页面，并且只有在#slideout被.popped时才可见

在此处查看演示

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

您可以在css中创建一个带有背景图像的新类，并在单击该类时将其添加到正文中 小提琴

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