点击不同元素时，需要打印不同的弹出文本

Question

我有一些图标，当点击每个图标时，我想要显示一个带有特定文本的弹出窗口。根据您单击的项目，文本会有所不同。

我发现弹出窗口在点击时可以正常显示，但我不知道如何将每个文本连接到每个图标，并在点击时显示正确的图标。

我是个新手，正如你所见，我只是在尝试一些东西来练习和理解我在做什么。这就是我到目前为止所知道的：

​

function togglePopup(n) {
  document.getElementById("popup-1").classList.toggle("active");
}

.popup .overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
  display: none;
}

.popup .content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: #fff;
  width: 500px;
  height: 250px;
  z-index: 2;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

.popup .close-btn {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #222;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
}

.popup.active .overlay {
  display: block;
}

.popup.active .content {
  transition: all 300ms ease-in-out;
  transform: translate(-50%, -50%) scale(1);
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px;
  font-size: 18px;
  border: 2px solid #222;
  color: #222;
  text-transform: uppercase;
  font-weight: 600;
  background: #fff;
}

<!-- DIAMOND GRID  -->
<div class="diamond-grid">
  <div id="diamond-icons">
    <div class="item"><i class="fab fa-html5 skillicon" onclick="togglePopup()"></i></div>
    <div class="item"><i class="fab fa-css3-alt skillicon" onclick="togglePopup()"></i></div>
    <div class="item"><i class="fab fa-bootstrap skillicon" onclick="togglePopup()"></i></div>
  </div>
  <!-- POP UP TEXT -->
  <div class="popup" id="popup-1">
    <div class="overlay"></div>
    <div class="content">
      <div class="close-btn" onclick="togglePopup()">&times;</div>
      <h1>HTML</h1>
      <p>I'm getting there</p>
    </div>
  </div>
  <div class="popup" id="popup-2">
    <div class="overlay"></div>
    <div class="content">
      <div class="close-btn" onclick="togglePopup()">&times;</div>
      <h1>CSS</h1>
      <p>I'm getting there</p>
    </div>
  </div>
  <div class="popup" id="popup-3">
    <div class="overlay"></div>
    <div class="content">
      <div class="close-btn" onclick="togglePopup()">&times;</div>
      <h1>BOOTSTRAP</h1>
      <p>I'm getting there</p>
    </div>
  </div>

​

Answer 1

只需将弹出窗口的编号传递到函数中，就可以相当简单地修改已有的内容。

请注意，html将更改为onclick="togglePopup(1)"，并且函数接受参数以与id选择器中的"popuup-"字符串连接

​

function togglePopup(n) {
  document.getElementById("popup-" + n).classList.toggle("active");
}

.popup .overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
  display: none;
}

.popup .content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: #fff;
  width: 500px;
  height: 250px;
  z-index: 2;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

.popup .close-btn {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #222;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
}

.popup.active .overlay {
  display: block;
}

.popup.active .content {
  transition: all 300ms ease-in-out;
  transform: translate(-50%, -50%) scale(1);
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px;
  font-size: 18px;
  border: 2px solid #222;
  color: #222;
  text-transform: uppercase;
  font-weight: 600;
  background: #fff;
}

<!-- DIAMOND GRID  -->
<div class="diamond-grid">
  <div id="diamond-icons">
    <div class="item"><i class="fab fa-html5 skillicon" onclick="togglePopup(1)">Item One</i></div>
    <div class="item"><i class="fab fa-css3-alt skillicon" onclick="togglePopup(2)">Item Two</i></div>
    <div class="item"><i class="fab fa-bootstrap skillicon" onclick="togglePopup(3)">Item Three</i></div>
  </div>
  <!-- POP UP TEXT -->
  <div class="popup" id="popup-1">
    <div class="overlay"></div>
    <div class="content">
      <div class="close-btn" onclick="togglePopup(1)">&times;</div>
      <h1>HTML</h1>
      <p>I'm getting there</p>
    </div>
  </div>
  <div class="popup" id="popup-2">
    <div class="overlay"></div>
    <div class="content">
      <div class="close-btn" onclick="togglePopup(2)">&times;</div>
      <h1>CSS</h1>
      <p>I'm getting there</p>
    </div>
  </div>
  <div class="popup" id="popup-3">
    <div class="overlay"></div>
    <div class="content">
      <div class="close-btn" onclick="togglePopup(3)">&times;</div>
      <h1>BOOTSTRAP</h1>
      <p>I'm getting there</p>
    </div>
  </div>

​

Answer 2

虽然这个问题已经回答了，但您可能有兴趣了解一下没有任何依赖项的本机方法。

https://codepen.io/DavidSanek/pen/WNryVZo

​

// Prepare variables for popup and it's content
let popup;
let popupContent;

// Wait for DOM to get loaded
document.addEventListener("DOMContentLoaded",function(){
  // Select all icons in DOM
  const icons = document.querySelectorAll('.js-icon');
  
  // Loop through the icons and add click event listener to each of them
  icons.forEach(icon => {
    icon.addEventListener('click', (event) => {
      // Get a content to be displayed in the popup
      const html = icon.querySelector('.js-icon-content').innerHTML;
      // Call openPopup and pass the HTML we got from icon's content
      openPopup(html);
    });
  })
  
  // Get popup and it's content and save it to the variable
  popup = document.querySelector('.js-popup');
  popupContent = popup.querySelector('.js-popup-content');
  
  // Add popup click event listener which closes the popup
  popup.addEventListener('click', closePopup);
  
  // Add click event listener for popup content which stops propagation. That means we do not want to close the modal, when someone clicks the popup content.
  popupContent.addEventListener('click', (e) => e.stopPropagation());
});

// Open the popup and add passed html in the popup content
function openPopup(html) {
  popup.classList.add('is-active');
  popupContent.innerHTML = html;
}

// Close popup, optionaly we might also clear the popup content's HTML.
function closePopup() {
  popup.classList.remove('is-active');
}

.my-icon {
  padding: 10px;
  background: black;
  color: white;
  margin: 0 10px;
  display: inline-block;
  cursor: pointer;
}

.my-icon div {
  display: none;
}

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
}

.popup.is-active {
  display: flex;
}

.popup-content {
  background: white;
  padding: 20px;
  border-radius: 4px;
}

<div class="my-icon js-icon">
  <span>Icon 1</span>
  <div class="js-icon-content">
    <h1>Hello world</h1>
    <p>I am simple content.</p>
  </div>
</div>

<div class="my-icon js-icon">
  <span>Icon 2</span>
  <div class="js-icon-content">
    <h1>Hello world 2</h1>
    <p>I am simple content.</p>
  </div>
</div>

<div class="popup js-popup">
  <div class="popup-content js-popup-content">
  </div>
</div>

​