В простой форме окно предупреждения представляет собой окно сообщения, которое появляется на экране вашего компьютера, чтобы узнать ваше мнение о действии, которое вы выполняете. Окно предупреждения содержит несколько сообщений и несколько кнопок, когда появляется всплывающее окно, которое пользователь должен выбрать по своему выбору. Существуют различные формы всплывающего окна, в них окно предупреждения является одним из них.
Как вы можете видеть на данном изображении окна предупреждения. Есть плоское окно с каким-то текстом и две кнопки. Текст используется в качестве предупреждения о действии, а два поля используются для запроса мнения пользователя о действии. Пользователи могут отменить действие, нажав кнопку «Отмена», и выполнить действие, нажав кнопку «Да». На самом деле 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;
}