Привет, ребята, добро пожаловать в наш блог. В сегодняшнем блоге мы рассмотрим, как создать автоматическое всплывающее окно с помощью HTML, CSS и JavaScript. Автоматическое всплывающее окно — это просто всплывающее окно с некоторой информацией, которое отображает сообщение во время загрузки веб-страницы.
Итак, теперь мы собираемся создать этот проект, для которого мы сначала добавляем HTML-код.
HTML-код для автоматического всплывающего окна
<div class='popup-onload'> <div class='cnt223'> <p> We were affected by the fire next door and will remain closed until further notice. <br/> <br/> <a href='' class='close'>Close</a> </p> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Сначала мы создаем два класса div с отдельным именем класса. Затем мы создаем тег абзаца, чтобы добавить сообщение, которое необходимо отобразить. а затем мы добавляем тег привязки с параметром «закрыть как», что означает, что он закроет всплывающее окно, когда мы нажмем кнопку «Закрыть», и это будет сделано с помощью Javascript.
Наконец, мы закрыли оба класса div.
Итак, HTML-код завершен. Теперь мы переходим к CSS, чтобы сделать всплывающее окно привлекательным.
Код CSS для автоматического всплывающего окна
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup-onload{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
color: #555555;
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
Код CSS будет объяснен пошагово, чтобы он был простым и эффективным. Поэтому следуйте этим шагам, приведенным ниже.
ШАГ 1. Во-первых, мы вызываем имя класса popup-onload и добавляем такие свойства, как ширина, поля, отображение, позиция и z-индекс для выравнивания, фиксация позиций для фиксированного содержимого и отображение ни одного из содержание.
Во-вторых, мы вызываем имя второго класса и добавляем точные свойства первого класса div, а здесь дополнительными свойствами являются просто min -width, background, box-shadow, чтобы сделать его привлекательным.
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.popup-onload{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
ШАГ 2.Второй шаг включает в себя добавление свойств для абзаца, отображаемого во всплывающем окне. Свойства были общими: размер шрифта, семейство шрифтов и цвет текста.
.cnt223 p{
clear: both;
color: #555555;
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
ШАГ 3.Теперь последний шаг включает в себя добавление кнопки к параметру закрытия со свойствами кнопки CSS.
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
Теперь часть CSS завершена. Итак, последний — это javascript для создания автоматического всплывающего окна.
Код JavaScript (jQuery) для автоматического всплывающего окна
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup-onload').show();
$('.close').click(function(){
$('.popup-onload').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
Первая часть JS заключается в том, что мы создаем и объявляем элемент HTML внутри JS и сохраняем его в переменной оверлея. и назначение содержимого с добавлением свойства JS. Теперь вызываем класс div и печатаем метод show() для отображения окна с сообщением.
Вторая часть: когда мы нажимаем на пустую область веб-страницы, всплывающее окно исчезает.
В последней части мы снова вызываем определенный класс div и добавляем для него метод, например append , hide и remove , который будет действовать, когда мы нажмем закрыть. действие содержит закрытие всплывающего окна.
Теперь мы успешно завершили добавление исходных кодов для нашего проекта. Итак, мы продолжим предварительный просмотр нашего проекта в данном разделе вывода.
Теперь мы успешно создали наше Автоматическое всплывающее окно с использованием HTML, CSS и JavaScript. Вы можете использовать этот проект для своих нужд персонала, и соответствующие строки кода приведены со ссылкой на ручку кода, упомянутую ниже.
Если вы обнаружите, что этот блог полезен, обязательно поищите в Google код со случайным кодом для интерфейсных проектов с исходными кодами и обязательно следуйте коду со случайной страницей в Instagram.
КОД ССЫЛКИ —Рози Бабу
АВТОР:Рагунатан С.
Какой редактор кода вы используете для кодирования автоматического всплывающего окна?
Я лично рекомендую использовать VS Code Studio, он прост и удобен в использовании.
Является ли этот проект адаптивным или нет?
Нет! это не адаптивный проект
Используете ли вы какие-либо внешние ссылки для создания этого проекта?
Да!
