Использование нескольких различных модалов

Question

Я следовал this guide, чтобы создать красивый CSS-мода с javascript. На моей странице у меня есть общая потребность в 8 разных моделях. Можно ли использовать те же идентификаторы и т. Д.? Я знаю, что мне нужно исправить некоторые вещи в Javascript, но я не знаю, как это сделать. Единственный способ, который я вижу сейчас, - использовать уникальные идентификаторы и просто дублировать Javascript и изменять переменные на идентификаторы.

Но должен быть лучший способ, не так ли? Таким образом, я могу это сделать:

<a id="myBtn" class="modalBtn">Button one</a> 
<div id="myModal" class="modal"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <span class="close">&times;</span> 
      <h2>Button one header</h2> 
     </div> 
     <div class="modal-body"> 
      <p>Button one text</p> 
     </div> 
    </div> 
</div> 

<a id="myBtn" class="modalBtn">Button two</a> 
<div id="myModal" class="modal"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <span class="close">&times;</span> 
      <h2>Button two header</h2> 
     </div> 
     <div class="modal-body"> 
      <p>Button two text</p> 
     </div> 
    </div> 
</div> 

и правильное отображение их. Вместо этого:

<a id="myBtn1" class="modalBtn">Button one</a> 
<div id="myModal1" class="modal"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <span class="close">&times;</span> 
      <h2>Button one header</h2> 
     </div> 
     <div class="modal-body"> 
      <p>Button one text</p> 
     </div> 
    </div> 
</div> 

<a id="myBtn2" class="modalBtn">Button two</a> 
<div id="myModal2" class="modal"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <span class="close">&times;</span> 
      <h2>Button two header</h2> 
     </div> 
     <div class="modal-body"> 
      <p>Button two text</p> 
     </div> 
    </div> 
</div> 

Если я сделаю это на втором примере; то я должен дублировать Javascript, чтобы он имел 8 переменных для каждой кнопки и каждого модального. Должен быть более простой, более чистый способ сделать это.

Кто-нибудь знает, как я могу это достичь?

Answer 1

Фундаментально, идентификаторы должны быть уникальными. Если вы беспокоитесь о javascript, тем не менее, вы можете инкапсулировать свою функцию, чтобы принять идентификатор в качестве параметра.

IE-

function ModalFunction(modalId, btnId){ 
    // Get the modal 
    var modal = document.getElementById(modalId); 

    // Get the button that opens the modal 
    var btn = document.getElementById(btnId); 

    // Get the <span> element that closes the modal 
    var span = document.getElementsByClassName("close")[0]; 

    // When the user clicks on the button, open the modal 
    btn.onclick = function() { 
     modal.style.display = "block"; 
    } 

    // When the user clicks on <span> (x), close the modal 
    span.onclick = function() { 
     modal.style.display = "none"; 
    } 

    // When the user clicks anywhere outside of the modal, close it 
    window.onclick = function(event) { 
     if (event.target == modal) { 
      modal.style.display = "none"; 
     } 
    } 
} 

, а затем вызвать его следующим образ:

ModalFunction("myModal1", "myBtn1"); 
ModalFunction("myModal2", "myBtn2"); 

Вы можете увидеть рабочую jsfiddle (с некоторой массовкой) здесь- https://jsfiddle.net/Lcmffb2b/2/