Что делать если попап окно уже открыто при загрузке на сайт?
<div class="popup" id="popup"> <div class="popup-content"> <div class="popup-container"> <span class="close-popup" id="close-popup">&times;</span> <h2>Заказать звонок</h2> <form id="contact-form"> <div class="form-name"> <label for="name">Имя</label> <input type="text" id="name" name="name" required> </div> <div class="form-name"> <label for="phone">Телефон</label> <input type="tel" id="phone" name="phone" value="+7" required> </div> <div class="form-name"> <label for="time">Удобное время для звонка</label> <input type="time" id="time" name="time" required> <p class="time-text">Мы можем перезвонить в любой день с 9:00 до 22:00</p> </div> <button type="submit">Отправить</button> <p class="button-text"><span class="gray-text">Нажимая на кнопку, вы соглашаетесь с политикой</span> <span class="red-text">защиты персональной информации.</span></p> </form> </div> </div> </div> |
<div class="popup" id="popup"> <div class="popup-content"> <div class="popup-container"> <span class="close-popup" id="close-popup">&times;</span> <h2>Заказать звонок</h2> <form id="contact-form"> <div class="form-name"> <label for="name">Имя</label> <input type="text" id="name" name="name" required> </div> <div class="form-name"> <label for="phone">Телефон</label> <input type="tel" id="phone" name="phone" value="+7" required> </div> <div class="form-name"> <label for="time">Удобное время для звонка</label> <input type="time" id="time" name="time" required> <p class="time-text">Мы можем перезвонить в любой день с 9:00 до 22:00</p> </div> <button type="submit">Отправить</button> <p class="button-text"><span class="gray-text">Нажимая на кнопку, вы соглашаетесь с политикой</span> <span class="red-text">защиты персональной информации.</span></p> </form> </div> </div> </div>
.popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1000; display: flex; justify-content: center; align-items: center; } .popup h2{ color: #F05A26; } .popup-content { background: #fff; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); position: relative; width: 450px; height: 605px; } .popup-container{ margin: auto; max-width: 85%; } .close-popup { position: absolute; top: 10px; right: 20px; font-size: 35px; cursor: pointer; } #contact-form { display: flex; flex-direction: column; gap: 10px; } label { font-weight: bold; } input[type="text"], input[type="tel"], input[type="time"] { border: none; border-bottom: 1px solid #ccc; padding: 5px; border-radius: 0; outline: none; width: 100%; font-size: 20px; padding: 5px 0; } #contact-form input:focus { border-bottom-color: #F05A26; } button[type="submit"] { background-color: #999999; color: #ffffff; border: none; padding: 10px 20px; cursor: pointer; width: 274px; height: 50px; font-size: 18px; margin-top: 10%; } |
.popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1000; display: flex; justify-content: center; align-items: center; } .popup h2{ color: #F05A26; } .popup-content { background: #fff; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); position: relative; width: 450px; height: 605px; } .popup-container{ margin: auto; max-width: 85%; } .close-popup { position: absolute; top: 10px; right: 20px; font-size: 35px; cursor: pointer; } #contact-form { display: flex; flex-direction: column; gap: 10px; } label { font-weight: bold; } input[type="text"], input[type="tel"], input[type="time"] { border: none; border-bottom: 1px solid #ccc; padding: 5px; border-radius: 0; outline: none; width: 100%; font-size: 20px; padding: 5px 0; } #contact-form input:focus { border-bottom-color: #F05A26; } button[type="submit"] { background-color: #999999; color: #ffffff; border: none; padding: 10px 20px; cursor: pointer; width: 274px; height: 50px; font-size: 18px; margin-top: 10%; }
const burgerMenu = document.querySelector('.burger-menu'); const menu = document.querySelector('.menu'); const orderButton = document.getElementById('order-button'); const popup = document.getElementById('popup'); const closePopup = document.getElementById('close-popup'); burgerMenu.addEventListener('click', () => { menu.classList.toggle('active'); }); orderButton.addEventListener('click', () => { popup.style.display = 'flex'; }); closePopup.addEventListener('click', () => { popup.style.display = 'none'; }); |
const burgerMenu = document.querySelector('.burger-menu'); const menu = document.querySelector('.menu'); const orderButton = document.getElementById('order-button'); const popup = document.getElementById('popup'); const closePopup = document.getElementById('close-popup'); burgerMenu.addEventListener('click', () => { menu.classList.toggle('active'); }); orderButton.addEventListener('click', () => { popup.style.display = 'flex'; }); closePopup.addEventListener('click', () => { popup.style.display = 'none'; });
Дополнительно:
Повесь на событие window.onfocus функцию, которая выясняет - открыто окно или нет. Событие будет срабатывать всегда, когда переключаешься по вкладкам броузера, так что осторожнее с лишними действиями.
Такое (внезапно открытые окна) бывает когда делается возврат кнопкой Back по истории, отследить такое тоже можно, но сложнее и иногда с глюками.
Ответы:
Значит, CSS стили не подействовали, или были перебиты другими стилями от других модулей.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Если у вас возникла проблема с тем, что попап окно уже открыто при загрузке сайта, есть несколько способов ее решить.
1. Изменить настройки попап окна: Попробуйте открыть файл, в котором находится код для открытия попап окна, и проверьте его настройки. Возможно, там указано, чтобы попап открывался автоматически при загрузке страницы. Измените эту настройку на "false" или удалите соответствующий код.
popup.open = false;
2. Добавить проверку состояния попап окна: Добавьте проверку на то, открыто ли попап окно при загрузке страницы. Если оно открыто, закройте его с помощью соответствующей функции.
if (popup.isOpen()) { popup.close(); }
3. Задержка открытия попап окна: Добавьте небольшую задержку перед открытием попап окна, чтобы пользователь успел просмотреть страницу перед появлением окна.
setTimeout(function() { popup.open(); }, 1000); // Задержка в 1 секунду
4. Использовать куки или Local Storage: Если попап окно открывается только один раз для каждого пользователя, можно использовать куки или Local Storage для сохранения информации о том, что попап уже был показан. При загрузке страницы проверяйте значение куки или Local Storage и открывайте попап только в случае, если он не был показан ранее.
if (!localStorage.getItem('popupShown')) { popup.open(); localStorage.setItem('popupShown', true); }
Эти способы помогут вам решить проблему с попап окном, которое открывается при загрузке сайта. Выберите подходящий для вашей ситуации и внесите соответствующие изменения в код.