无法创建很多模态

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>

Answer 2

这里是一个示例，该示例说明了如何在多个具有相同结构的对话框中重用javascript代码，而不必在代码块中重复。请注意如何在html元素中使用id模式将相应的侦听器动态添加到每个模式。

运行代码段以查看结果。

function getOpenModal(el){
    return function(){
    	el.style.display = "block";
    }
}

function getCloseModal(el){
    return function(){
        el.style.display = "none";
    }
}

var modalBtns = document.getElementsByClassName('modalBtn');

Array.prototype.forEach.call(modalBtns, function(el) {
    var variable_id = el.id.split('_')[1];
    var simpleModal = document.getElementById('simplemodal_' + variable_id);
    el.addEventListener("click", getOpenModal(simpleModal));   
    
    var closeBtn = document.getElementById('closeBtn_' + variable_id);    
    closeBtn.addEventListener("click", getCloseModal(simpleModal));
});

.modal {
display: none;
}

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

    <div id = "simplemodal_brennand" class = "modal">
        <div class = "modal-content">
            <div class = "modal-header">
                <span class = "closeBtn" id="closeBtn_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>
    
     <div class = "wrapper">
        <!--<img src = "conselho_antonio_lopes.png">-->
        <div class = "overlay">
            <div class = "content">
                <h2> Ricardo Lopes </h2> 
                <a class = "modalBtn" id="modalBtn_lopes" class = "button"> Saiba mais </a>
            </div>
        </div>
    </div>  

    <div id = "simplemodal_lopes" class = "modal">
        <div class = "modal-content">
            <div class = "modal-header">
                <span class = "closeBtn" id="closeBtn_lopes"> &times; </span>
                <h1 style = "color: #ffffff; margin: 0;"> Ricardo Lopes </h1>
            </div>
            <div class = "modal-body">
                <p> <span class = "nome"> Ricardo Lopes </span> é sócio da Brennand Energia.  </p>
            </div>
        </div>
    </div>

Answer 3

这是我的代码，基本上它重用了js代码，因此您不必编写13个具有不同id的相同代码。

因此，每个用于打开模式的按钮都需要一个唯一的ID，例如“ uniqueButtonId1”和“ uniqueButtonId2”等，对于关闭模式ID，您只需添加后缀，例如“ Target”或“ _modal”， JS很容易找到模态。

您仍然需要生成13个按钮和13个模态，但是JS代码会很整洁。

0:

var openModalBtns = document.getElementsByClassName("button");
for (var i = 0; i < openModalBtns.length; i++) {
  openModalBtns[i].addEventListener('click', openModal);
}

var closeModalBtns = document.getElementsByClassName("closeBtnbrennand");
for (var i = 0; i < closeModalBtns.length; i++) {
  closeModalBtns[i].addEventListener('click', closeModal);
}


function openModal() {
  var openModalId = this.getAttribute('id') + 'Target';
  var modalToOpen = document.getElementById(openModalId);
  modalToOpen.style.display = 'block';
}

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

.row {
  margin: 10px 0px;
}

.modal {
  display: none;
}

和jsfidle可以查看示例