javascript - 具有不同ID的第二个模式打开时会产生不同的效果-为什么？

我有两种不同的定价卡：

    <div class="card card1" id="open">
      <span class=title>Basic</span>
      <h1>$99 USD</h1>
      <h4>Lorem ipsum dolor sit amet.</h4>
      <h2>YOU GET:</h2>
      <ul>
        <li>Access to AM</li>
        <li>Unlimited Households</li>
        <li>White-Labeling</li>
      </ul>
    </div>

    <div class="card card2" id="open2">
      <span class=title>Pro</span>
      <h1>$129 USD</h1>
      <h4>Lorem ipsum dolor sit amet.</h4>
      <h2>YOU GET:</h2>
      <ul>
        <li>Cash-Flow Reporting</li>
        <li>Beneficiary Visualization</li>
        <li>Unlimited TMs</li>
      </ul>
    </div>

单击时，每个都应调出不同的模式：

    <div class="modal-container" id="modal_container">
      <div class="modal">
        <h1>Modal goes here</h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
        <button id="close">Close me</button>
      </div>

      <div class="modal-container" id="modal_container2">
      <div class="modal">
        <h1>Modal 2 goes here</h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
        <button id="close2">Close me</button>
      </div>

所有ID都是唯一的。使用此JS，我可以调出第一个模态，但不能调出第二个模态：

const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');

open.addEventListener('click', () => {
  modal_container.classList.add('show');
});

close.addEventListener('click', () => {
  modal_container.classList.remove('show');
});

我为第二张卡和模式添加了唯一的ID，但是当我通过添加以下代码将它们拉入JS时：

const open2 = document.getElementById('open2');
const modal_container2 = document.getElementById('modal_container2');
const close2 = document.getElementById('close2');

open2.addEventListener('click', () => {
  modal_container2.classList.add('show');
});

close2.addEventListener('click', () => {
  modal_container2.classList.remove('show');
});

我没有得到相同的效果。
这是相关的CSS：添加了相关的CSS

.modal-container {
  background-color: rgba(0,0,0,0.3);
  position: fixed;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.modal-container.show {
  opacity: 1;
  pointer-events: auto;
}

最佳答案

在您的代码笔上有一些错误，双体打开和关闭标签，第二个模态在第一个模态的容器内，Id被复制，并且在JS端，第二个模态的侦听器缺失，请尝试以下操作：

const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');
const open2 = document.getElementById('open2');
const modal_container2 = document.getElementById('modal_container2');
const close2 = document.getElementById('close2');

open.addEventListener('click', () => {
  modal_container.classList.add('show');
});

close.addEventListener('click', () => {
  modal_container.classList.remove('show');
});

open2.addEventListener('click', () => {
  modal_container2.classList.add('show');
});

close2.addEventListener('click', () => {
  modal_container2.classList.remove('show');
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body  {
  background: #f4efed;
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  cursor: crosshair;
}

.card {
  background-color: #fff;
  border-radius: 10px;
  padding: 60px 30px;
  text-align: center;
  max-width: 450px;
  min-width: 275px;
  margin: 1em;
  transition: .2s ease all;
}

.card:hover {
  transform: translateY(-20px);
  box-shadow: 0 10px 20px rgba(0,0,0,.3);
  cursor: pointer;
}

.card1 {
  background-image: linear-gradient(to bottom right, #41464d, #2d3137);
  color: white;
}

.card2 {
  background-image: linear-gradient(to bottom right, #dbb898, #b98351);
  color: white;
}

.card .title {
  font-size: .8em;
}

.card1 .title{
  font-weight: bold;
  background-color: #444950;
  border-radius: 10px;
  padding: 12px 10px;
}

.card2 .title{
  font-weight: bold;
  background-color: white;
  border-radius: 10px;
  padding: 12px 10px;
  color: #2d3137;
}

h1 {
  margin: 30px 0 30px 0;
}

h4 {
  font-weight: 100;
  font-size: .75em;
}

h2 {
  margin: 25px;
  font-size: .8em;
}

ul {
  font-size: .75em;
  line-height: 1.75em;
  list-style: none;
}

.modal-container {
  background-color: rgba(0,0,0,0.3);
  position: fixed;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.modal-container.show {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background-color: white;
  border-radius: 10px;
  width: 800px;
  max-width: 100%;
  padding: 30px 50px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  text-align: center;
}

.modal h1 {
  margin: .5em;
}

.modal p {
 font-size: 14px;
  opacity: 0.7;
}

.modal-container button {
  background-color: #444950;
  color: white;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  font-size: 14px;
  padding: 10px 25px;
  margin: 15px 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Pricing Cards</title>
</head>
<body>
    <div class="card card1" id="open">
      <span class=title>Basic</span>
      <h1>$99 USD</h1>
      <h4>Lorem ipsum dolor sit amet.</h4>
      <h2>YOU GET:</h2>
      <ul>
        <li>Access to Asset-Map</li>
        <li>Unlimited Households</li>
        <li>White-Labeling</li>
      </ul>
    </div>

    <div class="card card2" id="open2">
      <span class=title>Pro</span>
      <h1>$129 USD</h1>
      <h4>Lorem ipsum dolor sit amet.</h4>
      <h2>YOU GET:</h2>
      <ul>
        <li>Cash-Flow Reporting</li>
        <li>Beneficiary Visualization</li>
        <li>Unlimited Target-Maps</li>
      </ul>
    </div>

    <div class="modal-container" id="modal_container">
      <div class="modal">
        <h1>Modal goes here</h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
        <button id="close">Close me</button>
      </div>
    </div>

    <div class="modal-container" id="modal_container2">
      <div class="modal">
        <h1>Modal 2 goes here</h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
        <button id="close2">Close me</button>
      </div>
    </div>

  </body>
</html>

关于javascript - 具有不同ID的第二个模式打开时会产生不同的效果-为什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61326349/