Обычно я не задают настолько глупые вопросы но что то я зашел в тупичок))) Пользовался я раньше простым попап но тут решил воспользоваться вы*бистым... И вот результат имеем такой html код:
<!-- modal -->
<div class="modal-overlay">
<div class="modal">
<a class="close-modal">
<svg viewBox="0 0 20 20">
<path fill="#000000" d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z"></path>
</svg>
</a><!-- close modal -->
<div class="modal-content">
<div class="download_form">
<form enctype="multipart/form-data" method="post" id="form">
<h1>Заказать бесплатный звонок</h1>
<p>заполните форму и мы перезвоним вам в течение 5 мин</p>
<input type="text" name="name" placeholder="Ваше имя" required><br>
<input type="text" name="phone" placeholder="Контактный телефон"><br>
<button type="submit" class="btn btn-success">Заказать бесплатный звонок</button>
</form>
</div>
</div><!-- content -->
</div><!-- modal -->
</div><!-- overlay -->
немного стилей:
@media only screen and (min-width: 640px) {
.modal-overlay {
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
}
.modal {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin: 0 auto;
background-color: #fff;
max-width: 600px;
height: 400px;
border-radius: 20px;
opacity: 0;
overflow-y: auto;
visibility: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: scale(1.2);
transform: scale(1.2);
transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}
.modal .close-modal {
position: absolute;
cursor: pointer;
top: 5px;
right: 15px;
opacity: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
transition-delay: 0.3s;
}
.modal .close-modal svg {
width: 1.75em;
height: 1.75em;
}
.modal .modal-content {
opacity: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1);
transition-delay: 0.3s;
border: 0;
}
.modal.active {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.modal.active .modal-content {
opacity: 1;
}
.modal.active .close-modal {
-webkit-transform: translateY(10px);
transform: translateY(10px);
opacity: 1;
}
@media only screen and (max-width: 639px) {
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
border-radius: 0;
-webkit-transform: scale(1.1);
transform: scale(1.1);
padding: 0 !important;
}
.close-modal {
right: 20px !important;
}
}
.download_form {
text-align: center;
color: #474747;
}
.download_form h1 {
font-size: 35px;
}
.download_form input {
margin: 5px 0;
width: 300px;
font-size: 20px;
padding: 0 8px;
border: 1px solid #474747;
border-radius: 5px;
}
.download_form button {
margin-top: 5px;
font-size: 20px;
}
и как же без JS:
var elements = $('.modal-overlay, .modal');
$('.open-modal').click(function(){
elements.addClass('active');
});
$('.close-modal').click(function(){
elements.removeClass('active');
});
Теперь возникает вопрос: как на странице создать 2 или более разных попапов? В JS "нуб" и пробовал реализовать это вот таким способом:
var elements = $('.modal-overlay, .modal');
$('.open-modal').click(function(){
elements.addClass('active');
});
$('.close-modal').click(function(){
elements.removeClass('active');
});
var elements = $('.modal-overlay1, .modal1');
$('.open-modal1').click(function(){
elements.addClass('active1');
});
$('.close-modal1').click(function(){
elements.removeClass('active1');
});
Я просто везде добавил цифру 1 в конце классов (да да я понимаю что это тупо) в итоге у меня вообще перестал работать попап. Подскажите пожалуйста как сделать 2 или более попапов на странице? (Контент в popap будет разным)
