Question

我的代码类似于： -

<div id="boxgallery" class="boxgallery" data-effect="effect-3">
            <div class="panel"><img src="img/2.jpg" alt="Image 2" />
                <button class="button overlay-launcher" id="pop2">
                    link
                </button>
                <div id="pop2" class="overlay-background"></div>
                <div id="pop2" class="overlay-content">
                    <button id="pop2" class="overlay-close">Close overlay Window</button>
                </div>
            </div>
            <div class="panel"><img src="img/3.jpg" alt="Image 3" />
                <button class="button overlay-launcher" id="pop3">
                    link
                </button>>
                <div id="pop3" class="overlay-background"></div>
                <div id="pop3" class="overlay-content">
                    <button id="pop3" class="overlay-close">Close overlay Window</button>
                </div>
            </div>
            <div class="panel"><img src="img/1.jpg" alt="Image 1" />
                <button class="button overlay-launcher" id="pop1">
                    link
                </button>>
                <div id="pop1" class="overlay-background"></div>
                <div id="pop1" class="overlay-content">
                    <button id="pop1" class="overlay-close">Close overlay Window</button>
                </div>
            </div>
            <div class="panel"><img src="img/4.jpg" alt="Image 4" />
                <button class="button overlay-launcher" id="pop4">
                    link
                </button>>
                <div id="pop4" class="overlay-background"></div>
                <div id="pop4" class="overlay-content">
                    <button id="pop4" class="overlay-close">Close overlay Window</button>
                </div>

            </div>
        </div>

我在尝试： -

$(function() {
                $(".overlay-launcher").click(function() {
                    $(".overlay-content,.overlay-background").toggleClass("active");
                });
            });

但只有当我只有其中一个时它才会起作用或者如果我分别为每个人编写jquery

我想要实现的是，如果我点击pop1的启动器，那么第一个叠加层的内容和背景应该出现

其余部分

我发现的最近的是Single function to toggle multiple divs inside other divs individually

但在我的具体情况下它并没有真正解决问题我，我想根据元素的类

切换活动类

编辑： CSS是这样的： -

.overlay-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: .50;
    z-index: 1000;
}
.overlay-content {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 20px 0 #222;
    display: none;
    height: 240px;
    left: 50%;
    margin: -120px 0 0 -160px;
    padding: 10px;
    position: absolute;
    top: 50%;
    width: 320px;
    z-index: 1000;
}
.overlay-background .active,
.overlay-content .active {
    display: block;
}

Answer 1

以下是使其发挥作用需要完成的两件事

在css中，

.overlay-background.active, .overlay-content.active {
    display: block;
}

在Javascript中，

$(".overlay-launcher").click(function () {
    $('.overlay-content,.overlay-background').removeClass("active");
    $(this).siblings('.overlay-content,.overlay-background').addClass("active");
});

$('.overlay-close').on('click', function(){
    $('.overlay-content,.overlay-background').removeClass("active");
});

工作小提琴https://jsfiddle.net/sachin_puthran/ssmstjvu/7/

Answer 2

您的网页中不应该有多个相同id的元素。 id值在特定页面中应该是唯一的。

另请注意其他语法错误：

</button>>
</button>>
$(".overlay-launcher,")

根据点击的元素

2 个答案: