javascript - 模式仅在多个按钮上显示最后一个按钮内容

Question

我是编码新手，希望创建三个按钮来打开三种不同的模式——到目前为止，我只是想让最后一个按钮的内容显示在所有三个模式中(当我将其注释掉时，第二个按钮适用于前两个按钮，当它被注释掉时，第一个按钮适用于第一个按钮)。我试过将 div 更改为类，但无济于事。任何帮助，将不胜感激!

HTML:

  <!--First Button-->

  <div class="btn">
    <button id="btn-name">
      <h1>NAME</h1>
    </button>
  </div>

  <br>

  <div class="btn">
    <button id="btn-news">
      <h1>NEWS</h1>
    </button>
  </div>

  <br>

  <div class="btn">
    <button id="btn-cv">
      <h1>CV</h1>
    </button>
  </div>

  <!-- The Modal -->
  <div id="modal1" class="modal1">

    <!-- Modal content -->
    <div class="modal1-content">
      <span class="close1">&times;</span>
      <h4>ONE</h4>
      <h4>CONTACT</h4>
      <p>. . .</p>
    </div>
  </div>


  <!--Second Button-->

  <!-- The Modal -->
  <div id="modal2" class="modal2">

    <!-- Modal content -->
    <div class="modal2-content">
      <span class="close2">&times;</span>
      <h4>TWO</h4>
      <h4>CURRENTLY</h4>
    </div>
  </div>


  <!--Third Button-->

  <!-- The Modal -->
  <div id="modal3" class="modal3">

  <!-- Modal content -->
    <div class="modal3-content">
      <span class="close3">&times;</span>
        <h4>THREE</h4>
        <h4>EDUCATION</h4>
      </div>
  </div>

JS:

<script>
// Get the modal
var modal = document.getElementById("modal1");

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

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close1")[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";
  }
}
</script>


<!--Second Button-->

<script>
// Get the modal
var modal = document.getElementById("modal2");

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

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close2")[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";
  }
}
</script>


<!--Third Button-->

<script>
// Get the modal
var modal = document.getElementById("modal3");

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

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close3")[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";
  }
}
</script>

我猜这段代码中有很多冗余。 . .乐观地说，

捷腾

Answer 1

您的代码的问题是您声明了 var modal和 var btn为您的 3 个模式和按钮使用相同的名称。使用多个 <script></script>并不意味着它们与其他代码分开。

尝试用不同的名称声明。

示例代码:

<script>
// Get the modal
var modal1 = document.getElementById("modal1");

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

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

// When the user clicks the button, open the modal
btn1.onclick = function() {
  modal1.style.display = "block";
}

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

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal1) {
    modal1.style.display = "none";
  }
}
</script>


<!--Second Button-->

<script>
// Get the modal
var modal2 = document.getElementById("modal2");

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

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

// When the user clicks the button, open the modal
btn2.onclick = function() {
  modal2.style.display = "block";
}

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

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal2) {
    modal2.style.display = "none";
  }
}
</script>


<!--Third Button-->

<script>
// Get the modal
var modal3 = document.getElementById("modal3");

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

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

// When the user clicks the button, open the modal
btn3.onclick = function() {
  modal3.style.display = "block";
}

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

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal3) {
    modal3.style.display = "none";
  }
}
</script>

另外，如果您有此类代码。只需使用一个 <script></script>仅。