Сегодня в этом блоге вы узнаете, как создать всплывающую форму подписки или модальное окно, используя HTML CSS и Javascript. Подписка по электронной почте — это опция на веб-сайте, которая позволяет посетителям получать новости и обновления по электронной почте, указав свои адреса электронной почты в форме подписки.
Как вы можете видеть на изображении, это всплывающая форма подписки на электронную почту, основанная на HTML CSS и Javascript. Сначала отображается только кнопка, но когда вы нажмете на эту кнопку, появится эта форма подписки. Существует также эффект плавного скольжения, что означает, что при нажатии на кнопку эта форма будет скользить с верхней стороны.
Если вам трудно понять, что я говорю. Вы можете посмотреть полный видеоурок по этой программе (форма всплывающей подписки).
Видеоурок по всплывающей форме подписки с использованием Javascript
Если вы новичок и имеете некоторые базовые знания в области HTML и CSS, вы также можете создать форму подписки такого типа, модальные диалоговые окна. Вы можете использовать эту всплывающую форму подписки на своих сайтах, проектах и где угодно.
Если вам нравится эта программа (Форма подписки на всплывающее окно) и вы хотите получить исходные коды. Вы можете легко получить исходные коды этой программы (всплывающая форма подписки по электронной почте). Чтобы получить исходные коды, вам просто нужно прокрутить вниз. И я считаю, что эта программа поможет вам много.
Всплывающая форма подписки или модальное диалоговое окно [Исходные коды]
Для создания этой программы (форма всплывающей подписки). Во-первых, вам нужно создать два файла: один файл HTML, а другой — файл CSS. После создания этих файлов просто вставьте следующие коды в свой файл. Сначала создайте файл HTML с именем index.html и вставьте данные коды в свой файл HTML. Помните, что вы должны создать файл с расширением .html.
HTML КОД:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sliding Modal Box Style</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<body>
<div class="start-btn">
<a href="#">View Modal</a>
</div>
<div class="center modal-box">
<div class="fas fa-times"></div>
<div class="fas fa-envelope icon1"></div>
<header>Don't miss updates from us!</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, suscipit, pers
</p>
<form action="">
<div class="fas fa-envelope icon2"></div>
<input type="email" required placeholder="abc@example.com">
<button>Subscribe</button>
</form>
<div class="icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
<script>
$(document).ready(function(){
$('.start-btn').click(function(){
$('.modal-box').toggleClass("show-modal");
$('.start-btn').toggleClass("show-modal");
});
$('.fa-times').click(function(){
$('.modal-box').toggleClass("show-modal");
$('.start-btn').toggleClass("show-modal");
});
});
</script>
</body>
</html>
Во-вторых, создайте файл CSS с именем style.css и вставьте данные коды в свой файл CSS. Помните, что вы должны создать файл с расширением .css.
CSS КОД:
@import url('https://fonts.googleapis.com/css?family=Lobster+Two:700|Poppins&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
text-align: center;
background: #44d1ee;
font-family: 'Poppins',sans-serif;
}
::selection{
color: white;
background: #48DBFB;
}
.center,.start-btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.start-btn a{
font-size: 25px;
background: white;
color: #48DBFB;
padding: 10px 15px;
border-radius: 5px;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
box-shadow: 5px 5px 15px rgba(0,0,0,.1);
}
.modal-box{
top: 40%;
opacity: 0;
visibility: hidden;
background: white;
height: auto;
width: 400px;
padding: 30px;
border-radius: 5px;
border: 1px solid #50dcfb;
box-shadow: 5px 5px 30px rgba(0,0,0,.2);
}
.start-btn.show-modal{
opacity: 0;
visibility: hidden;
}
.modal-box.show-modal{
top: 50%;
opacity: 1;
visibility: visible;
transition: .4s;
}
.modal-box .fa-times{
position: absolute;
top: 0;
right: 0;
background: #48DBFB;
height: 45px;
width: 50px;
line-height: 40px;
color: white;
font-size: 18px;
border-radius: 0 5px 0 50px;
padding-left: 13px;
cursor: pointer;
}
.fa-times:hover{
font-size: 22px;
}
.modal-box .icon1{
font-size: 60px;
background: #48DBFB;
height: 120px;
width: 120px;
color: white;
border-radius: 50%;
line-height: 120px;
text-align: center;
margin-bottom: 10px;
}
.modal-box header{
font-size: 31px;
font-family: 'Lobster Two';
margin-bottom: 10px;
}
.modal-box p{
/* margin-bottom: 10px; */
line-height: 20px;
color: grey;
}
form input, form button{
height: 50px;
width: 95%;
border-radius: 3px;
}
form .icon2{
position: absolute;
height: 50px;
width: 50px;
margin-top: 15px;
background: #48DBFB;
color: white;
line-height: 50px;
font-size: 24px;
border-radius: 5px 0 0 5px;
}
form input{
margin-top: 15px;
padding: 0 65px;
font-size: 18px;
outline: none;
border: 2px solid #1ed2fa;
caret-color: #48DBFB;
}
input::placeholder{
color: #8c8c8c;
}
form input:focus{
box-shadow: 0 0 15px #82e6fc,
0 0 25px #b4f0fd,
0 0 35px #ffffff;
}
form button{
margin-top: 15px;
background: #48DBFB;
color: white;
font-size: 25px;
border: 1px solid #1ed2fa;
letter-spacing: 1px;
cursor: pointer;
outline: none;
transition: .3s;
}
form button:hover{
background: #1ed2fa;
border: 1px solid #05cdfa;
letter-spacing: 2px;
}
.modal-box .icons{
margin-top: 25px;
}
.icons i{
font-size: 22px;
margin: 0 7px;
color: #48DBFB;
cursor: pointer;
}
.icons i:hover{
transform: scale(1.1);
color: #05cdfa;
}
JAVASCRIPT КОД:
<script>
$(document).ready(function(){
$('.start-btn').click(function(){
$('.modal-box').toggleClass("show-modal");
$('.start-btn').toggleClass("show-modal");
});
$('.fa-times').click(function(){
$('.modal-box').toggleClass("show-modal");
$('.start-btn').toggleClass("show-modal");
});
});
</script>
Вот и все, теперь вы успешно создали всплывающую форму подписки, используя HTML CSS и Javascript. Если ваш код не работает или вы столкнулись с какой-либо ошибкой/проблемой, прокомментируйте или свяжитесь с нами со страницы контактов.