Как сделать всплывающую кнопку html

Аватар пользователя Aleksey
Aleksey
06 апреля 2023

Для создания всплывающей кнопки на html можно использовать следующий код:

<button onclick="myFunction()">Нажми меня</button>

<div id="myPopup">
  <p>Это всплывающее окно!</p>
</div>

<script>
  function myFunction() {
    var popup = document.getElementById('myPopup');
    popup.classList.toggle('show');
  }
</script>

<style>
  /* Стили для всплывающего окна */
  #myPopup {
    display: none;
    position: absolute;
    z-index: 1;
  }

  #myPopup.show {
    display: block;
    /* Добавьте здесь желаемые стили */
  }
</style>

Обратите внимание, что для отображения всплывающего окна используется CSS свойство display. При клике на кнопку вызывается функция myFunction(), которая добавляет/удаляет класс show у элемента с id myPopup. Определение стилей для всплывающего окна осуществляется в блоке <style></style>.

0 0

Похожие вопросы