Всем привет. Подключил magnific-popup, вызываю с помощью него форму по клике на ссылку:
<!-- Форма -->
<div id="form-wrapper" class="form-wrapper">
<form id="form" class="form" name="form">
<input required type="text" class="form__input" name="name" placeholder="ИМЯ">
<input required type="email" class="form__input" name="email" placeholder="E-MAIL">
<input required type="text" class="form__input" name="phone" placeholder="ТЕЛЕФОН">
<button class="form__button">ЗАКАЗАТЬ КОНСУЛЬТАЦИЮ</button>
</form>
</div>
Соответсвенно, чтобы ее скрыть прописываю ей display: none, а затем при клике на ссылку добавляю класс с display: block:
// Форма в модальном окне
$('#popup-form').magnificPopup({
type: 'inline'
});
$(function(){
$("#popup-form").click(function(){
$("#form-wrapper").addClass("form-wrapper_display_block"); return false;
});
});
Без display: none форма всплывает нормально, наверх не скроллится. Если же скрыть, то при первом нажатии на ссылку, страница скроллится к началу, а при последующих нажатиях не скролится до обновления страницы.
Еще такой момент, при открытии формы, фон немного сдвигается влево, после закрытия возвращается назад. Заранее спасибо.
UPD: Первая проблема была в том, что в href был указан id формы, после того, как указал класс, фомра перестала скроллится наверх. Вторая проблема - magnific добавляет margin-right к тегу html, при открытии попапа.
Простой
