Как сделать так, чтобы изображение и текст всплывали после нажатия на слово? Html, css и js - PullRequest
Новая
       14

Как сделать так, чтобы изображение и текст всплывали после нажатия на слово? Html, css и js

0 голосов
/ 17 июня 2020

У меня есть этот список: 

<nav>
  Navigation Bar
  <ul>
    <li>
      <div class="popup" onclick="myFunction()">
        Myself
        <span class="popuptext" id="myPopup">My description </span>
        <img src="/images/picture.jpg" alt="My picture" />
      </div>

      <script>
        function myFunction() {
          var popup = document.getElementById("myPopup");
          popup.classList.toggle("show");
        }
      </script>
    </li>
    <li>Contact</li>
    <li>Other</li>
  </ul>
</nav>

Я хочу, чтобы, когда я нажимаю c на Myself, мое описание всплывает с моим изображением. Но это не работает.

Не могли бы вы мне помочь, что я делаю не так?

Мне нужно использовать html, css и js.

Спасибо !!!

Ответы [ 2 ]

0 голосов
/ 17 июня 2020

Кажется, вам не хватает некоторых CSS правил.

Давайте посмотрим на эту строку: 

popup.classList.toggle("show");

Функция toggle добавит здесь класс show class, если элемент popup не имеет его, в противном случае удалите его.

Это означает, что элемент с классом popuptext должен не отображаться по умолчанию, и если класс show не добавлено.

Таким образом, вы должны определить 2 CSS стилей, например: 

.popuptext.show {
  display: inline-block; // show element when you have the class name 'show'
}
.popuptext {
  display: none; // hide by default
}

Вот рабочий пример: https://jsfiddle.net/3bmqdcsg/

0 голосов
/ 17 июня 2020

Не видя вашего CSS кода для .show, я не могу точно определить, что пошло не так, но добавив код CSS для .show и .popuptext, все работает!

РЕДАКТИРОВАТЬ: Я также добавил простой код анимации для анимации «всплывающего окна» 

.show {
  display: block!important;
  /* The bottom is for animation when the popup gets shown */
  animation: popup .2s 1;
}

@keyframes popup {
  from { transform: scale(0); }
  to { transform: scale(1); }
}


.popuptext {
  display: none;
}
<nav>
  Navigation Bar
  <ul>
    <li>
      <div class="popup" onclick="myFunction()">
        Myself
        <span class="popuptext" id="myPopup">My description</span>
        <img src="/images/picture.jpg" alt="My picture" />
      </div>

      <script>
        function myFunction() {
          var popup = document.getElementById("myPopup");
          popup.classList.toggle("show");
        }
      </script>
    </li>
    <li>Contact</li>
    <li>Other</li>
  </ul>
</nav>
...