将弹出应用于其他按钮。拥有适用于一个按钮的代码

Question

我有一个功能，允许我按一个按钮，弹出一个包含我想要的内容。你可以在下面看到这个。我想有多个这些，但不知道如何更改代码。我想有不同的按钮打开不同的弹出内容。

我已经复制并粘贴了JS代码并更改了相关ID，但它不起作用。有人有什么想法吗？

谢谢！

＆＃13;

＆＃13;

    // Get the modal
    var modal = document.getElementById('myModal');

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

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

    // When the user clicks 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";
    }
    }

＆＃13;

HTML (Button):

    <button class="buttin" id="myBtn">Terms & Conditions</button>

HTML (Pop Up Content):

    <div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
     <span class="close">×</span>
      <h3 style="margin-top: 0px;"><strong>Terms and Conditions</strong></h3>
    Please read the following terms and conditions before using our website.
    </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

就像osyan在评论中所说，但你需要一个变量pr id。像：

var modal = document.getElementById('myModal1');
var modal2 = document.getElementById('myModal2');

有关完整示例，请参阅https://jsfiddle.net/3u8ummwn/2/

Answer 2

你可以这样做：添加data-attribute =＆＃34; modalId＆＃34;按钮和点击获取该ID，并通过该ID获取模态的dom

＆＃13;

＆＃13;

// Get the modal
    

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

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

     // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
      
      if(event.target.className=="close")
         return;
      
      var modal = document.getElementById(event.target.getAttribute("data-modal"));
      
         if (event.target != modal) {
        modal.style.display = "none";
    }
      
        if (event.target.hasAttribute("data-modal")) {
        modal.style.display = "block";
    }
      
     
    }

＆＃13;

HTML (Button):

    <button class="buttin" data-modal="myModal">Terms & Conditions</button>

HTML (Pop Up Content):

    <div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
     <span class="close">×</span>
      <h3 style="margin-top: 0px;"><strong>Terms and Conditions</strong></h3>
    Please read the following terms and conditions before using our website.
    </div>
    </div>

<br/>
 <button class="buttin" data-modal="myModal1">New Button</button>

  <div id="myModal1" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
     <span class="close" >×</span>
      <h3 style="margin-top: 0px;"><strong>Terms and Conditions 11111</strong></h3>
    Please read the following terms and conditions before using our website.
    </div>
    </div>

＆＃13;

＆＃13;

＆＃13;