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

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Для создания всплывающей кнопки на 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>.

2 года назад

Aleksey

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

1 месяц

Позиционирование в CSS

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

1 месяц

Анимация CSS

Навык создания анимаций в CSS для улучшения пользовательского опыта и повышения востребованности на рынке

2 месяца

Bootstrap

Навык работы с SASS, Bootstrap 5 и Gulp для ускорения, упрощения и оптимизации процесса вёрстки и разработки сайтов

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