JavaScript在多种模式下添加类

Question

我有点绝望。我试图使用与Behance一样的模式，当你点击其中一个小窗口时，但我无法让我的JavaScript工作。我无法显示“test2”。

function modalActive(){ 
 
    document.getElementsByClassName("window")[0].classList.add("modalActive") 
 
}; 
 

 
function closeModal(){ 
 
    document.getElementsByClassName("window")[0].classList.remove("modalActive") 
 
};

.gallery-item { 
 
    width: 120px; 
 
    height: 120px; 
 
    border: 3px solid gray; 
 
    float: left; 
 
    margin-left: 10px; 
 
} 
 
.window { 
 
    display: none; 
 
    height: 500px; 
 
    width: 500px; 
 
    Background-color: gray; 
 
    z-index: 100000; 
 
    position: absolute; 
 
    margin: 0 auto; 
 
} 
 
.modalActive { 
 
    display: block !important; 
 
}

<div class="gallery-item"> 
 
    <button class="button" onclick="modalActive()">derp</button> 
 
</div> 
 
<div class="window"> 
 
    <button class="close" onclick="closeModal()">×</button> 
 
    test1 
 
</div> 
 

 

 
<div class="gallery-item"> 
 
    <button class="button" onclick="modalActive()">derp</button> 
 
</div> 
 
<div class="window"> 
 
    <button class="close">×</button> 
 
    test2 - im not able to see this due to some error in my code/knowledge 
 
</div>

Answer 1

你必须针对特定模式上的按钮时，点击打开。目前你只能找到第一个模态并设置modalActive类。

我点击一个按钮时更新了下面的代码以传递模式ID号。

function modalActive(id){ 
 
    document.getElementsByClassName("window-" + id)[0].classList.add("modalActive") 
 
}; 
 

 
function closeModal(){ 
 
    document.getElementsByClassName("modalActive")[0].classList.remove("modalActive") 
 
};

.gallery-item { 
 
    width: 120px; 
 
    height: 120px; 
 
    border: 3px solid gray; 
 
    float: left; 
 
    margin-left: 10px; 
 
} 
 
.window { 
 
    display: none; 
 
    height: 500px; 
 
    width: 500px; 
 
    Background-color: gray; 
 
    z-index: 100000; 
 
    position: absolute; 
 
    margin: 0 auto; 
 
} 
 
.modalActive { 
 
    display: block !important; 
 
}

<div class="gallery-item"> 
 
    <button class="button" onclick="modalActive(1)">derp</button> 
 
</div> 
 
<div class="window window-1"> 
 
    <button class="close" onclick="closeModal()">×</button> 
 
    test1 
 
</div> 
 

 

 
<div class="gallery-item"> 
 
    <button class="button" onclick="modalActive(2)">derp</button> 
 
</div> 
 
<div class="window window-2"> 
 
    <button class="close" onclick="closeModal()">×</button> 
 
    test2 - im not able to see this due to some error in my code/knowledge 
 
</div>