javascript - 不能创建很多模态

Question

好的，问题来了。我有一个简单的模态结构如下:

HTML:

    <div class = "wrapper">
        <img src = "conselhoantoniobrennand.png">
        <div class = "overlay">
            <div class = "content">
                <h2> Antônio Brenannd </h2> 
                <a id = "modalBtn" class = "button"> Saiba mais </a>
            </div>
        </div>
    </div>  

    <div id = "simplemodal" class = "modal">
        <div class = "modal-content">
            <div class = "modal-header">
                <span class = "closeBtn"> &times; </span>
                <h1 style = "color: #ffffff; margin: 0;"> Antônio Brennand </h1>
            </div>
            <div class = "modal-body">
                <p> <span class = "nome"> Simple text  </p>
            </div>
        </div>
    </div>

JS:

var modal = document.getElementById('simplemodal');
var modalBtn = document.getElementById('modalBtn'); 
var closeBtn = document.getElementsByClassName('closeBtn')[0];

modalBtn.addEventListener("click", openModal);
closeBtn.addEventListener("click", closeModal);
window.addEventListener("click", clickOutside);


function openModal(){
    modal.style.display = "block";
}

function closeModal(){
    modal.style.display = "none";
}

function clickOutside(e){
    if(e.target == modal){
        modal.style.display = "none";
    }
}

当我在网页上只有一个模式时，它工作得很好。但是，我需要有 13 个像这样的模态。我尝试做的是这样的:

HTML:

    <div class = "wrapper">
        <img src = "conselhoantoniobrennand.png">
        <div class = "overlay">
            <div class = "content">
                <h2> Antônio Brenannd </h2> 
                <a id = "modalBtnbrennand" class = "button"> Saiba mais </a>
            </div>
        </div>
    </div>  

    <div id = "simplemodalbrennand" class = "modal">
        <div class = "modal-content">
            <div class = "modal-header">
                <span class = "closeBtnbrennand"> &times; </span>
                <h1 style = "color: #ffffff; margin: 0;"> Antônio Brennand </h1>
            </div>
            <div class = "modal-body">
                <p> <span class = "nome"> Antônio Brennand </span> é sócio da Brennand Energia.  </p>
            </div>
        </div>
    </div>

JS:

var modalbrennand = document.getElementById('simplemodalbrennand');
var modalBtnbrennand = document.getElementById('modalBtnbrennand'); 
var closeBtnbrennand = document.getElementsByClassName('closeBtnbrennand')[0];

modalBtnbrennand.addEventListener("click", openModal);
closeBtnbrennand.addEventListener("click", closeModal);
window.addEventListener("click", clickOutside);


function openModal(){
    modalbrennand.style.display = "block";
}

function closeModal(){
    modalbrennand.style.display = "none";
}

function clickOutside(e){
    if(e.target == modal){
        modalbrennand.style.display = "none";
    }
}

所以我基本上尝试自定义在 JS 代码中捕获的标签，以便拥有 13 个模态。由于这种策略，我有 13 个 javascript“代码块”，其中唯一的区别是变量的名称。 HTML 也是如此:除了模式内容(明显不同)外，代码中唯一的区别是将在 JS 上调用的标签的 id 的名称。

问题是:当我在页面中拥有所有 13 个模态时(当设置了所有 13 个按钮时)，我单击的每个按钮都会调用相同的模态。我无法调用 13 种不同的模态。我做错了什么？

我试着说得非常具体，但如果我在输入这个问题时做错了什么，请澄清一下。

Answer 1

您必须为每个模态设置唯一的 ID。我更喜欢在元素上使用 onclick，这样您就可以只对当前的 this 属性使用一个函数。重要的是设置unique id。我在这里提供了一些示例，包括 onclick 和 unique id ....

window.addEventListener("click", clickOutside);

function openModal(self) {
    event.stopPropagation();
    var modal = document.getElementById(self.id + "_modal");
    modal.style.display = 'block';
}

function closeModal(id){
   event.stopPropagation();
   var modal = document.getElementById(id + "_modal");
    modal.style.display = 'none';
}

function clickOutside(e){
    var modal = document.querySelectorAll('.modal')
    for(var i = 0; i < modal.length;i++) {
        if(!modal[i].contains(e.target)){
           modal[i].style.display = "none";
        }
    }
}

.modal {
display: none;
}

<div class = "wrapper">
        <img src = "conselhoantoniobrennand.png">
        <div class = "overlay">
            <div class = "content">
                <h2> Antônio Brenannd </h2> 
                <a id="simple" class ="button" onclick="openModal(this)"> Saiba mais </a>
            </div>
        </div>
    </div>  

    <div id="simple_modal" class = "modal">
        <div class = "modal-content">
            <div class = "modal-header">
                <span class = "closeBtn" onclick="closeModal('simple')"> &times; </span>
                <h1 style = "color: #ffffff; margin: 0;"> Antônio Brennand </h1>
            </div>
            <div class = "modal-body">
                <p> <span class = "nome"> Simple text  </p>
            </div>
        </div>
    </div>

    <div class = "wrapper">
        <img src = "conselhoantoniobrennand.png">
        <div class = "overlay">
            <div class = "content">
                <h2> Antônio Brenannd </h2> 
                <a id="brennand" class ="button" onclick="openModal(this)"> Saiba mais </a>
            </div>
        </div>
    </div>  

    <div id="brennand_modal" class="modal">
        <div class = "modal-content">
            <div class = "modal-header">
                <span class = "closeBtnbrennand" onclick="closeModal('brennand')"> &times; </span>
                <h1 style = "color: #ffffff; margin: 0;"> Antônio Brennand </h1>
            </div>
            <div class = "modal-body">
                <p> <span class = "nome"> Antônio Brennand </span> é sócio da Brennand Energia.  </p>
            </div>
        </div>
    </div>