Модальное окно оповещения с использованием HTML и CSS

В простой форме окно предупреждения представляет собой окно сообщения, которое появляется на экране вашего компьютера, чтобы узнать ваше мнение о действии, которое вы выполняете. Окно предупреждения содержит несколько сообщений и несколько кнопок, когда появляется всплывающее окно, которое пользователь должен выбрать по своему выбору. Существуют различные формы всплывающего окна, в них окно предупреждения является одним из них.

Как вы можете видеть на данном изображении окна предупреждения. Есть плоское окно с каким-то текстом и две кнопки. Текст используется в качестве предупреждения о действии, а два поля используются для запроса мнения пользователя о действии. Пользователи могут отменить действие, нажав кнопку «Отмена», и выполнить действие, нажав кнопку «Да». На самом деле id сначала есть кнопка с текстом «Click Me», и окно предупреждения скрыто, при нажатии на эту кнопку «Click Me» появляется окно предупреждения, а кнопка «Click Me» исчезает.

Если вы испытываете трудности с пониманием того, что я говорю об этой программе [анимированное окно оповещения или пользовательское всплывающее окно], не беспокойтесь, я сделал полный видеоурок об этой программе, который приведен ниже. Я уверен, что после просмотра полного видео об этой программе [Custom Alert box] вся ваша путаница прояснится.

Видео анимированного окна оповещения с использованием HTML и CSS

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

Как вы видели на видео с окном предупреждения, если сначала есть одна кнопка с текстом, нажмите меня, и когда эта кнопка будет нажата, появится окно предупреждения, и кнопка «щелкнуть меня» исчезнет. Кроме того, вы видели, что окно предупреждения содержит некоторый текст в качестве предупреждения или мы можем сказать действие, которое мы собираемся выполнить, и мы видели, что есть две кнопки, одна кнопка с текстом, а другая кнопка с текстом «Да, удалить». Эти кнопки используются для получения мнения пользователей. Чтобы управлять этим окном предупреждения, я использовал «флажок ввода HTML и свойство метки на кнопке «Нажмите на меня»». 

Если вы знакомы с HTML и CSS, вы можете легко создать это всплывающее окно, а если у вас есть знания о JavaScript, вы можете добавить различные анимации и функции в это окно предупреждения. Те друзья, которые испытывают трудности с созданием этого всплывающего окна, не волнуйтесь, я предоставил вам файлы исходного кода этой программы [Анимированное окно оповещения с использованием только HTML и CSS | Пользовательское всплывающее окно] в приведенном ниже.

HTML КОД:

<div class="container"> <input type="checkbox" id="check"> <label class="show_button" for="check">Click Me</label> <div class="background"></div> <div class="alert_box"> <div class="icon"> <i class="fas fa-exclamation"></i> </div> <header>Confirm</header> <p>Are you sure want to permanently delete this Photo?</p> <div class="btns"> <label for="check">Yes, Delete!</label> <label for="check">Cancel</label> </div> </div> </div>

CSS КОД:

.alert_box, .show_button{ position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); } .show_button{ height: 55px; padding: 0 30px; font-size: 20px; font-weight: 400; cursor: pointer; outline: none; border: none; color: #fff; line-height: 55px; background: #2980b9; border-radius: 5px; transition: all 0.3s ease; } .show_button:hover{ background: #2573a7; } .background{ position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: all 0.3s ease; } .alert_box{ padding: 30px; display: flex; background: #fff; flex-direction: column; align-items: center; text-align: center; max-width: 450px; width: 100%; border-radius: 5px; z-index: 5; opacity: 0; pointer-events: none; transform: translate(-50% , -50%) scale(0.97); transition: all 0.3s ease; } #check:checked ~ .alert_box{ opacity: 1; pointer-events: auto; transform: translate(-50% , -50%) scale(1); } #check:checked ~ .background{ opacity: 1; pointer-events: auto; } #check{ display: none; } .alert_box .icon{ height: 100px; width: 100px; color: #f23b26; border: 3px solid #f23b26; border-radius: 50%; line-height: 97px; font-size: 50px; } .alert_box header{ font-size: 35px; font-weight: 500; margin: 10px 0; } .alert_box p{ font-size: 20px; } .alert_box .btns{ margin-top: 20px; } .btns label{ display: inline-flex; height: 55px; padding: 0 30px; font-size: 20px; font-weight: 400; cursor: pointer; line-height: 55px; outline: none; margin: 0 10px; border: none; color: #fff; border-radius: 5px; transition: all 0.3s ease; } .btns label:first-child{ background: #2980b9; } .btns label:first-child:hover{ background: #2573a7; } .btns label:last-child{ background: #f23b26; } .btns label:last-child:hover{ background: #d9210d; }