Привет кодерам!! В этой статье создается Всплывающее сообщение с использованием HTML и CSS. В этом проекте мы создадим кнопку, и когда пользователь нажмет на нее, на экране будет отображаться всплывающее сообщение с некоторым содержимым. Этот проект прост и подходит для начинающих.

Я надеюсь, что у вас должно быть представление о проекте.

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

Шаг 1: HTML-код всплывающего сообщения

HTML означает язык разметки гипертекста, и он обеспечивает структуру нашего веб-сайта.

ВСЕ HTML-документы начинаются с ‹!doctype HTML›, что информирует браузер о том, что наш код соответствует самой последней версии HTML.

HTML-документ начинается с ‹html› и заканчивается на ‹/html›.

Основной тег ‹body›, куда мы будем писать весь наш контент, который позже будет отображаться в браузере.

Теперь посмотрим на наш HTML-код.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="" content="" />
    <title>Popup Message</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Popup Message</h1>
    <div class="box">
      <a class="button" href="#popup1">Let me Pop up</a>
    </div>
    <div id="popup1" class="overlay">
      <div class="popup">
        <h2>Here i am</h2>
        <a class="close" href="#">&times;</a>
        <div class="content">
          Thank to pop me out of that button, Please follow us <a href="https://www.codewithrandom.com/" target="_blank">@codeWithrandom</a>
        </div>
      </div>
    </div>
  </body>
</html>
  • Во-первых, мы будем использовать тег H1 для создания основного заголовка нашей веб-страницы.
  • Теперь мы создадим div, а внутри него сделаем кнопку с помощью тега button.
  • Мы создали div с наложением классов, чтобы охватить все содержимое страницы при отображении всплывающего окна. Это заставляет пользователя закрывать всплывающее окно, прежде чем вернуться к содержимому страницы, а также создает приятный пользовательский опыт. Div с всплывающим окном класса будет нашим всплывающим окном, содержащим заголовок и значок закрытия всплывающего окна. Div с содержимым класса будет содержать содержимое нашего всплывающего окна.

Теперь давайте посмотрим на наш вывод

Вывод:

Итак, мы добавили теги HTML и их содержимое. Теперь пришло время сделать его привлекательным, добавив код CSS.

Шаг 2: CSS-код для всплывающего сообщения

Каскадные таблицы стилей — это язык таблиц стилей, который используется для описания представления документа, написанного на языке разметки, таком как HTML или XML.

Теперь посмотрим на наш CSS-код.

body {
  font-family: Arial, sans-serif;
  background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
}
h1 {
  text-align: center;
  font-family: Tahoma, Arial, sans-serif;
  color: #fff;
  margin: 80px 0;
}
.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}
.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}
.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}
.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}
@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

Теперь, когда мы включили наш код CSS в нашу статью, давайте рассмотрим его шаг за шагом.

Шаг 1. Сначала мы выбрали тег body и установили семейство шрифтов Arial, фон — изображение и размер фона для покрытия. Мы установили Overflow на hidden, чтобы предотвратить нежелательную горизонтальную прокрутку и лишние пробелы в вашем проекте, когда элементы существуют за пределами области просмотра.

Теперь мы стилизуем наш основной заголовок веб-страницы с помощью тега h1. Мы выровняли текст по центру и закрасили его белым цветом, а верхнее и нижнее поля — 80 пикселей.

body {
  font-family: Arial, sans-serif;
  background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
}
h1 {
  text-align: center;
  font-family: Tahoma, Arial, sans-serif;
  color: #fff;
  margin: 80px 0;
}

Шаг 2.Используя класс «.box», мы установим ширину нашего тега div на 40 % и отступ на 35 пикселей. Установите выравнивание текста по центру и границу на 2 пикселя сплошного белого цвета.

Используя класс (.button), мы определяем ширину и отступ нашей кнопки как 1rem и 35px соответственно. Мы также добавили переход к нашей кнопке. Мы также добавили селектор наведения; когда пользователь наводит курсор на кнопку, цвет фона меняется на зеленый.

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}
.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

Шаг 3. Теперь мы определяем положение нашего всплывающего окна как фиксированное с помощью класса «.overlay». Установите поля и отступы на ноль. Видимость скрыта, а непрозрачность установлена ​​на ноль. Когда мы выбираем «.overlay: target», для видимости устанавливается значение visible, а для opacity — 1.

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

Шаг 4. Теперь мы стилизуем наш h2, используя класс «.popup», с нулевым верхним полем и семейством шрифтов Tahoma. Мы определили положение нашего значка закрытия как абсолютное значение, размер шрифта 20 пикселей и жирность шрифта, используя класс «.popup.close».

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}
.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;

Шаг 5. На этом шаге мы сделаем нашу веб-страницу максимально отзывчивой, используя медиа-запрос, чтобы установить максимальную ширину экрана на 700 пикселей. Ширина всплывающего окна будет составлять 70%, если размер экрана равен или меньше указанного нами размера экрана.

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

Теперь мы завершили наш код css, и ниже приведен результат после стилизации нашей веб-страницы.

Окончательный вывод всплывающего сообщения с использованием HTML:

Теперь, когда мы закончили наш проект, теперь посмотрим, как он работает.

Теперь мы успешно создали наше Всплывающее сообщение с кодом. Вы можете использовать этот проект для своей личной веб-страницы, и мы надеемся, что вы поняли проект. Если вы сомневаетесь, не стесняйтесь комментировать!

Если вы обнаружите, что этот блог полезен, обязательно выполните поиск codewithrandom в Google для проектов внешнего интерфейса с исходными кодами и обязательно следуйте коду со случайной страницей Instagram.

Подписаться: codewithrandom

Написал: Арун

Код: Пракаш

Какой редактор кода вы используете для этого всплывающего сообщения?

Я лично рекомендую использовать VS Code Studio, он прост и удобен в использовании.

Является ли этот проект адаптивным или нет?

Да, это всплывающее сообщение является адаптивным проектом

Используете ли вы какие-либо внешние ссылки для создания этого проекта?

Нет, мы используем чистый код Html и Css для всплывающих сообщений.