Необходимо печатать разный всплывающий текст при нажатии на разные элементы - PullRequest
Новая
       140

Необходимо печатать разный всплывающий текст при нажатии на разные элементы

1 голос
/ 12 июля 2020

У меня есть несколько значков, и при нажатии на каждую из них я хочу показать всплывающее окно с определенным текстом c. Текст различается в зависимости от того, какой элемент вы щелкаете.

Я дохожу до точки, в которой всплывающее окно правильно отображается при щелчке, но не могу понять, как связать каждый текст с каждым значком и отображать правый при нажатии.

Я новичок в этом, как вы можете видеть, и просто пытаюсь кое-что попрактиковаться и понять, что я делаю. Вот что у меня есть: 

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>

Ответы [ 2 ]

2 голосов
/ 12 июля 2020

Простая передача номера всплывающего окна в функцию делает довольно простые модификации того, что у вас есть.

Обратите внимание, что html меняется на onclick="togglePopup(1)", и функция принимает аргумент для объединения с "popuup-" строка в селекторе id 

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>
0 голосов
/ 12 июля 2020

Хотя на этот вопрос уже был дан ответ, вам может быть интересно взглянуть на собственный способ без каких-либо зависимостей.

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>
...