Всплывающее сообщение HTML: методы создания исчезающего всплывающего окна - Fcodenotes

Существует несколько способов создания всплывающего HTML-сообщения, которое исчезает через определенный период времени. Вот несколько вариантов:

Функция JavaScript setTimeout: вы можете использовать функцию setTimeout в JavaScript, чтобы отобразить всплывающее сообщение, а затем скрыть его по истечении определенного интервала времени. Вот пример:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Popup Message</title>
  <style>
    #popup {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 20px;
      border: 1px solid #ccc;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }
  </style>
  <script>
    function showPopup() {
      var popup = document.getElementById("popup");
      popup.style.display = "block";
      setTimeout(function() {
        popup.style.display = "none";
      }, 3000); // Set the time in milliseconds (e.g., 3000 = 3 seconds)
    }
  </script>
</head>
<body>
  <h1>HTML Popup Message</h1>
  <button onclick="showPopup()">Show Popup</button>
  <div id="popup">
    <p>This is a popup message that will disappear after 3 seconds.</p>
  </div>
</body>
</html>

CSS-анимация: вы можете использовать CSS-анимацию для создания внешнего вида всплывающего сообщения, которое исчезает по истечении определенного времени. Вот пример:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Popup Message</title>
  <style>
    @keyframes popupAnimation {
      0% { opacity: 1; }
      90% { opacity: 1; }
      100% { opacity: 0; }
    }
    #popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 20px;
      border: 1px solid #ccc;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      animation: popupAnimation 3s forwards;
    }
  </style>
</head>
<body>
  <h1>HTML Popup Message</h1>
  <div id="popup">
    <p>This is a popup message that will disappear after 3 seconds.</p>
  </div>
</body>
</html>

Это всего лишь пара примеров. Вы можете изучить и другие методы, например использование библиотек JavaScript, таких как jQuery, или фреймворков CSS, таких как Bootstrap.