javascript - 从ID属性中调出Div

我需要在整个网站上多次重复一个按钮。但是，由于“ id”属性，我无法执行此操作。我该如何调出我的JavaScript来回答“ div”而不是“ id”。简单地放置<button class="modalbutton">< /div>不适用于我。

从w3schools获取了此代码。几乎是初学者，找不到任何地方回答的问题。

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


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

    // 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";
      }
    }

/* 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</button>

<button id="modalbutton" class="modalbutton">Open Modal</button>

<button id="modalbutton" class="modalbutton">Open Modal</button>

<!-- The Modal -->
<div id="detailmodal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

最佳答案

用户document.querySelectorAll并通过class属性获取所有按钮。然后循环浏览按钮列表，并在按钮上分别添加一个侦听器。

const btns = document.querySelectorAll(".modalbutton");

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

完整解决方案：

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


// Get the button that opens the modal
var btns = document.querySelectorAll(".modalbutton");

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

// When the user clicks the button, open the modal
btns.forEach(btn=>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";
  }
}

/* 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</button>

<button id="modalbutton" class="modalbutton">Open Modal</button>

<button id="modalbutton" class="modalbutton">Open Modal</button>

<!-- The Modal -->
<div id="detailmodal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

根据单击的按钮处理模态的动态内容：

const data = [{
    title: "Modal Header 1",
    content: ["Some text in the Modal Body 1", "Some other text 1..."],
    footer: "Modal Footer 1"
  },
  {
    title: "Modal Header 2",
    content: ["Some text in the Modal Body 2", "Some other text 2..."],
    footer: "Modal Footer 2"
  },
  {
    title: "Modal Header 3",
    content: ["Some text in the Modal Body 3", "Some other text 3..."],
    footer: "Modal Footer 3"
  }
]

function dynamicModalContent(i) {
  const {
    title,
    content,
    footer
  } = data[i];

  const body = content.map(c => `<p>${c}</p>`).join("");

  return `
    <!-- Modal content -->
    <div class="modal-content">
      <div class="modal-header">
        <span class="close">&times;</span>
        <h2>${title}</h2>
      </div>
      <div class="modal-body">
        ${body}
      </div>
      <div class="modal-footer">
        <h3>${footer}</h3>
      </div>
    </div>
    `
}

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

// Get the button that opens the modal
var btns = document.querySelectorAll(".modalbutton");

window.addEventListener("click", function(e){
   const tar = e.target;
   if(tar.classList.contains('close')){
      modal.style.display = "none";
   }
});

// When the user clicks the button, open the modal
btns.forEach((btn, i) => {
  btn.addEventListener("click", function() {
    modal.innerHTML = dynamicModalContent(i);
    modal.style.display = "block";
  });
});


// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.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 class="modalbutton">Open Modal</button>

<button class="modalbutton">Open Modal</button>

<button class="modalbutton">Open Modal</button>

<!-- The Modal -->
<div id="detailmodal" class="modal">

</div>