← Назад к каталогу

Демонстрация: 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();
                              }
                            });