Демонстрация: Callback-01
Замовте свій продукт зараз
Ціна: Безкоштовно.
Code: 👇
<!-- HTML -->
<button type="button" class="fixed-btn75839"></button>
<div class="backdrop59783 is-hidden59783">
<div class="popup34982">
<button type="button" class="close-popup-btn34982"></button>
<div class="popup-content59783">
<h3 class="popup-title23748" style="font-size: 22px; margin-top: 30px;">
Замовте свій продукт зараз
</h3>
<img src="../../img/elements/back-call/back-call-1/prod.png" alt="Продукт" class="product-image">
<div class="product-price">
Ціна: <span class="product-price-new">Безкоштовно</span>.
</div>
<form action="api/send.php" method="post" id="form__block23487" class="form59783">
<div class="form-field84922">
<label for="name" class="popup-label34982">Ваше ім’я</label>
<input type="text" id="name" name="fullName" required class="popup-input34982">
</div>
<div class="form-field84922">
<label class="popup-label34982" for="phone">Ваш телефон</label>
<input
type="tel"
id="phone"
name="phoneNumber"
autocomplete="off"
data-phone-input required
class="popup-input34982"
placeholder="+38"
required>
</div>
<button type="submit" class="form-btn73829">Замовити зараз</button>
<small>*При замовленні курсу</small>
<input type="hidden" name="country" value="RO" />
<input type="hidden" name="language" value="ro" />
<input type="hidden" name="offer_id" value="{offer_id}" />
<input type="hidden" name="subid" value="{subid}" />
</form>
</div>
</div>
</div>
<!-- CSS -->
.fixed-btn75839 {
border: none;
position: fixed;
top: 25%;
right: -10px;
z-index: 1000;
width: 70px;
height: 60px;
border-top-left-radius: 35px;
border-bottom-left-radius: 35px;
background: url("../../img/elements/back-call/back-call-1/phone-icon.png"),
#019541;
background-size: 50%;
background-repeat: no-repeat;
background-position: 20px center;
box-shadow: -3px 5px 15px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: transform 0.2s ease, right 0.2s ease;
}
.fixed-btn75839:hover {
transform: translateX(-5px);
}
@media screen and (min-width: 768px) {
.fixed-btn75839 {
right: -15px;
width: 95px;
height: 70px;
background-size: 60%;
}
.fixed-btn75839:hover {
transform: translateX(-15px);
}
}
.backdrop59783 {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1002;
background-color: rgba(1, 31, 74, 0.6);
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.is-hidden59783 {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.popup34982 {
position: relative;
width: 90%;
max-width: 500px;
background-color: white;
border-radius: 20px;
box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.3);
padding: 30px 20px;
border: 3px solid #013f5f;
transform: translateY(0);
transition: transform 0.3s ease-out;
}
.popup-content59783 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.popup-title23748 {
font-size: 28px;
font-weight: 600;
color: #013f5f;
margin-bottom: 20px;
text-align: center;
}
@media screen and (min-width: 768px) {
.popup-title23748 {
font-size: 34px;
}
}
.form59783 {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.form-field84922 {
width: 100% !important;
margin-bottom: 20px !important;
}
.popup-input34982 {
width: 92% !important;
padding: 12px 18px !important;
border-radius: 30px !important;
background-color: #f9f9f9 !important;
color: #013f5f !important;
transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}
.popup-input34982:focus {
border-color: #ff6b6b !important;
box-shadow: 0 0 5px rgba(255, 107, 107, 0.5) !important;
}
.popup-label34982 {
font-size: 14px !important;
margin-bottom: 8px !important;
color: #013f5f !important;
display: block !important;
font-weight: 500 !important;
transition: color 0.3s ease !important;
}
.popup-input34982::placeholder {
color: #a3a3a3 !important;
}
.popup-input34982:focus {
border-color: #ff6b6b;
}
.form-btn73829 {
width: 100%;
padding: 12px;
background: linear-gradient(
to right,
#e04242,
#ff6b6b
);
color: white;
border: 2px solid transparent;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.form-btn73829:hover {
background: linear-gradient(to left, #e04242, #ff6b6b);
border-color: #ff4b4b;
transform: scale(1.02);
}
.close-popup-btn34982 {
position: absolute;
top: 15px;
right: 15px;
width: 40px;
height: 40px;
border-radius: 100%;
background: url("../../img/elements/back-call/back-call-1/close.png")
no-repeat center,
rgb(0, 0, 0);
background-size: cover;
cursor: pointer;
}
.product-image {
max-width: 100px;
margin-bottom: 15px;
}
.product-price {
font-size: 20px;
color: #013f5f;
font-weight: bold;
margin-bottom: 20px;
}
@media (max-width: 660px) {
.popup34982 {
margin: 0px 10px;
}
}
<!-- JS -->
const backdrop = document.querySelector(".backdrop59783");
const btnOpen = document.querySelector(".fixed-btn75839");
const btnClose = document.querySelector(".close-popup-btn34982");
const toggleModal = () => {
backdrop.classList.toggle("is-hidden59783");
};
btnOpen.addEventListener("click", () => {
toggleModal();
});
btnClose.addEventListener("click", () => {
toggleModal();
});
backdrop.addEventListener("click", (e) => {
if (e.target === backdrop) {
toggleModal();
}
});