具有不同 ID 的第二个模式以不同的效果打开 - 为什么？

Question

我有两张不同的定价卡：

    <div class="card card1" id="open">
      <span class=title>Basic</span>
      <h1> 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>9 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:Added相关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;
}

Answer 1

你的 codepen 上有一些错误，双体打开和关闭标签，第二个模态在第一个的容器内，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> 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>9 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>

具有不同 ID 的第二个模式以不同的效果打开 - 为什么？

The second modal with a different ID opens with a different effect - Why?

html

javascript

css

getelementbyid