使用幾種不同的模態

Question

我跟着this guide用javascript創建了一個漂亮的CSS模式。在我的頁面上，我總共需要8種不同的模式。是否有可能使用相同的ID等？我知道我必須修復Javascript中的一些東西，但我不知道如何。我現在看到的唯一方法是使用唯一的ID，並重復使用Javascript並將變量更改爲ID。

但是一定有更好的辦法，不是嗎？這樣我可以做到這一點：

<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，但是你可以封裝你的函數已經把id作爲參數。 即 -

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/