javascript - 如何通过调用不同的id函数来使用多个model box？

Question

我试图通过更改模型及其脚本的类和 ID 名称来使用多个模型框，但出于某种原因，而不是为各自的链接打开各自的模型框，所有 ID 链接都打开一个模型框，它是在所有的底部。

到目前为止我的代码:

<a href="#" id="myBtn">Text </a>
<a href="#" id="myBtntrain" > Train </a>

<div id="myModal" class="modalhospital">
  <div class="modal-contenthospital">
      <span class="closehospital"></span>
    <p style="padding:20px;text-align:center;"><strong>Is this Service for Self Or Someone Else ?</strong></p>
    <hr>
    <p style="padding:20px;text-align:center;"><a href="" class="modelonhover" >
        <strong style="float:left; padding-left:100px;color:#007AFF;">Self</strong></a><a href=""><strong style="float:right;padding-right:30px;color:#007AFF;">Someone Else</strong></a></p>
    <br>
  </div>
</div>

<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("closehospital")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>



<div id="myModaltrain" class="modaltrain">
  <div class="modal-contenttrain">
      <span class="closetrain"></span>
    <p style="padding:20px;text-align:center;"><strong>Is this train for Self Or Someone Else ?</strong></p>
    <hr>
    <p style="padding:20px;text-align:center;"><a href="" class="modelonhover" >
        <strong style="float:left; padding-left:100px;color:#007AFF;">Self</strong></a><a href=""><strong style="float:right;padding-right:30px;color:#007AFF;">Someone Else</strong></a></p>
    <br>
  </div>
</div>

<script>
var modal = document.getElementById("myModaltrain");
var btn = document.getElementById("myBtntrain");
var span = document.getElementsByClassName("closetrain")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

我对此很陌生，只是使用 w3 学校和其他资源进行学习。

Answer 1

看来我只需要用单独的名称而不是相同的名称来命名变量..

<a href="#" id="myBtn">Text </a>
<a href="#" id="myBtntrain" > Train </a>

<div id="myModal" class="modalhospital">
  <div class="modal-contenthospital">
      <span class="closehospital"></span>
    <p style="padding:20px;text-align:center;"><strong>Is this Service for Self Or Someone Else ?</strong></p>
    <hr>
    <p style="padding:20px;text-align:center;"><a href="" class="modelonhover" >
        <strong style="float:left; padding-left:100px;color:#007AFF;">Self</strong></a><a href=""><strong style="float:right;padding-right:30px;color:#007AFF;">Someone Else</strong></a></p>
    <br>
  </div>
</div>

<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("closehospital")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>



<div id="myModaltrain" class="modaltrain">
  <div class="modal-contenttrain">
      <span class="closetrain"></span>
    <p style="padding:20px;text-align:center;"><strong>Is this train for Self Or Someone Else ?</strong></p>
    <hr>
    <p style="padding:20px;text-align:center;"><a href="" class="modelonhover" >
        <strong style="float:left; padding-left:100px;color:#007AFF;">Self</strong></a><a href=""><strong style="float:right;padding-right:30px;color:#007AFF;">Someone Else</strong></a></p>
    <br>
  </div>
</div>

<script>
var modaltrain = document.getElementById("myModaltrain");
var btntrain = document.getElementById("myBtntrain");
var spantrain = document.getElementsByClassName("closetrain")[0];
btntrain.onclick = function() {
  modaltrain.style.display = "block";
}
spantrain.onclick = function() {
  modaltrain.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modaltrain) {
    modaltrain.style.display = "none";
  }
}
</script>

这解决了我的问题..无论如何，谢谢你们的时间..