将特定按钮链接到特定模式

Question

我需要在单击按钮时在模式内传播不同的内容。 我的问题是-在JavaScript中调出div元素。 截至目前，这是一个ID，我不能有多个ID。 自从我是JS新手以来，我对所有事情都很困惑。

最简单的形式是，我只需要按钮1与按钮1链接， 按钮2与按钮2链接 ，依此类推。 我不确定要在JS中进行哪些更改才能使其正常工作。

http://jsfiddle.net/mbLj68ua/10/

<button id="modalbutton" class="modalbutton">Open Modal 1</button>
<button id="modalbutton" class="modalbutton">Open Modal 2</button>
<button id="modalbutton" class="modalbutton">Open Modal 3</button>

<!-- Content 1 -->
<div id="detailmodal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>1 Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>please link with 1</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer"><h3>Modal Footer</h3></div>
  </div>
</div>

<!-- Content 2 -->
<div id="detailmodal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>2 Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>please link with 2</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer"><h3>Modal Footer</h3></div>
  </div>
</div>

<!-- Content 3 -->
<div id="detailmodal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>3 Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>please link with 3</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer"><h3>Modal Footer</h3></div>
  </div>
</div>

脚本：

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

// When the user clicks the buttons open the modal
for (let i = 0; i < btn.length; i++) {
  btn[i].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';
  }
};

Answer 1

您是正确的，您不想有多个ID。 您可以将每个按钮设置为不同的ID（modalbutton1，modalbutton2等），然后在javascript中获取对每个按钮的引用：

var modal1 = document.getElementById('modalbutton1');
var modal2 = document.getElementById('modalbutton2');

然后为每个按钮引用附加一个onclick处理程序

modal1.onclick=function(){ //Write your style code here }
modal2.onclick=function(){ //Write your style code here }

Answer 2

您需要使用索引document.getElementsByClassName('modal')[i]进行区分。

现在就试试：

 // Get the modal var modal = document.getElementById('detailmodal'); // Get the button that opens the modal var btn = document.getElementsByClassName("modalbutton"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close"); // When the user clicks the buttons open the modal for (let i = 0; i < btn.length; i++) { btn[i].onclick = function() { document.getElementsByClassName('modal')[i].style.display = "block"; } } for (let i = 0; i < span.length; i++) { // When the user clicks on <span> (x), close the modal span[i].onclick = function() { document.getElementsByClassName('modal')[i].style.display = "none"; } } // When the user clicks anywhere outside of the modal, close it for (let i = 0; i < window.length; i++) { window[i].onclick = function(event) { if (event.target == modal) { document.getElementsByClassName('modal')[i].style.display = "none"; } }} 

 /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { position: relative; float: right; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; max-width: 850px; width: 100%; height: 100%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.8s } /* Add Animation */ @-webkit-keyframes animatetop { from {right:-100px; opacity:0} to {right:0; opacity:1} } @keyframes animatetop { from {right:-100px; opacity:0} to {right:0; opacity:1} } 

 <button id="modalbutton" class="modalbutton">Open Modal 1</button> <button id="modalbutton" class="modalbutton">Open Modal 2</button> <button id="modalbutton" class="modalbutton">Open Modal 3</button> <!-- Content 1 --> <div id="detailmodal" class="modal"> <!-- Modal content --> <div class="modal-content"> <div class="modal-header"> <span class="close">&times;</span> <h2>1 Modal Header</h2> </div> <div class="modal-body"> <p>please link with 1</p> <p>Some other text...</p> </div> <div class="modal-footer"> <h3>Modal Footer</h3> </div> </div> </div> <!-- Content 2 --> <div id="detailmodal" class="modal"> <!-- Modal content --> <div class="modal-content"> <div class="modal-header"> <span class="close">&times;</span> <h2>2 Modal Header</h2> </div> <div class="modal-body"> <p>please link with 2</p> <p>Some other text...</p> </div> <div class="modal-footer"> <h3>Modal Footer</h3> </div> </div> </div> <!-- Content 3 --> <div id="detailmodal" class="modal"> <!-- Modal content --> <div class="modal-content"> <div class="modal-header"> <span class="close">&times;</span> <h2>3 Modal Header</h2> </div> <div class="modal-body"> <p>please link with 3</p> <p>Some other text...</p> </div> <div class="modal-footer"> <h3>Modal Footer</h3> </div> </div> </div> 

Answer 3

如果您的html内容是静态的并且模式数据不是动态的，则可以使用多个ID来实现安全的方式。我认为对多个按钮和div标签使用相同的ID不是一个好主意。 如果模态div标签的顺序不正确，则按钮将无法正常工作，并且可能显示了错误的模态。

所以最好这样写：

        btns = document.querySelectorAll('[id*=modalbutton-]');

for (let i = 1; i <= btns.length; i++) {
    var modalClassName = 'detailmodal-';

    btn = document.getElementById('modalbutton-' + i);     
  closeBtn = document.querySelector('#' + modalClassName + i + ' .close');

  closeBtn.onclick = function() {
    modal = document.getElementById(modalClassName + i);
    modal.style.display = "none";
    }

  btn.onclick = function() {
    modal = document.getElementById(modalClassName + i);
    modal.style.display = "block";
  }
}

和html模式的按钮和模式：

<button id="modalbutton-1" class="modalbutton">Open Modal 1</button>
<div id="detailmodal-1" class="modal">

<button id="modalbutton-2" class="modalbutton">Open Modal 2</button>
<div id="detailmodal-2" class="modal">

如果您不能使用多个ID，请使用具有某些值的data属性。 您可以在上面更改代码以使用属性，并使用其值来显示正确的模式。

<button id="modalbutton" data-button-id="1" class="modalbutton">Open Modal 1</button>
<div id="detailmodal" data-modal-id="1" class="modal">

然后像这样改变你的for循环

for (let i = 0; i < btn.length; i++) {
  btn[i].onclick = function(event) {
    var btnId = event.target.getAttribute("data-button-id");
    var modal = document.querySelector("[data-modal-id='" + btnId +"']");
    modal.style.display = "block";
  }
}