Почему в моем модальном диалоговом окне прыгает форма «подписки на рассылку»?

0

У меня есть модальное окно, которое появляется на каждой странице страницы (которая будет изменена позже), но есть проблема с тем, как форма электронной почты регистрируется внутри окна.

Форма будет случайным образом отображаться в верхней части сайта на секунду, а затем перепрыгнуть внутрь модального окна туда, где оно должно было быть, что, очевидно, не то, что я хочу, чтобы это делалось. Я хочу, чтобы он просто загружался внутри модального типа, как и всегда.

Здесь настройки для модального:

<!--
To turn off the home page popup box set the following value to false.
-->
{% assign show_home_popup = 'true' %}

<!--
Setting the following value to 'true' will display the popup
only on the user first visit to the home page on that day.
If the user returns a day later then the popup will display again.
Setting it to 'false' will display the popup every time the user enters
the home page.
-->
{% assign show_on_first_visit_only = 'false' %}

<!--
Paste the "Direct" Photobucket link to the image you want to display in the popup
between the quotes below.
-->

{% assign popup_image = 'https://dl.dropboxusercontent.com/s/2oac9b1j2cni7ta/JOINTHEPARTY.png' %}<!--
Set the max image width here if you'd like to make the image smaller
or bigger (i.e. assign image_width = '700').  The default width is 600
pixels, which will take effect if the quotes below are left empty 
(i.e. assign image_width = '' ).
-->
{% assign image_width = '450' %}

Здесь CSS для модального:

 #homeModal {
    top: 150px;
    width: 450px;
    height: 400px;
    {% if image_width == blank %}
        max-width: 600px;
    {% else %}
        max-width: {{image_width}}px;
    {% endif %}
    right:0;
    left: 0;
    margin:auto;
    display:inline-block;
    padding: 0;
}



#homeModal img {
    width: 100%;
}
#homeModal iframe {
    position: relative;
    top: -193px;
    left: 25px;
}
 /*#homeModal iframe body,
  #homeModal iframe html
  {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
 } */

 @media screen and (max-width: 500px) 
 {
 #homeModal {
 height: 300px;
 width: 350px;
 min-width: 350px;
 }  
 #homeModal iframe {
 left: 1px;
 position: relative;
 top: -163px;
 }
 }

Здесь код/​​плагин/скрипт для модального:

  <link rel="stylesheet" href="http://googledrive.com/host/0B51UCH0yGk6FVkFBakNmUXVuREk/reveal.css">
  <script src="http://googledrive.com/host/0B51UCH0yGk6FVkFBakNmUXVuREk/jquery.reveal.js" type="text/javascript"></script>    
  <script src="http://googledrive.com/host/0B51UCH0yGk6FVkFBakNmUXVuREk/jquery.cookie.js" type="text/javascript"></script>    
  <script>
  $(document).ready(function(){
  $('#homeModal img').attr('src', '{{popup_image}}');

  {% if show_on_first_visit_only == 'true' %}
  if (!$.cookie("popup")) {
    //trigger your popup message
    $('#homeModal').reveal({
        animation: 'none',                         //fade, fadeAndPop, none
        animationspeed: 300,                       //how fast animtions are
        closeonbackgroundclick: true,              //if you click background will modal close?
        dismissmodalclass: 'close-reveal-modal' 
    });       

    //after pop-up show, rewrite the cookie
    $.cookie("popup","false", {expires: 1} ); //not to show again
}
{% else %}
    $('#homeModal').reveal({
        animation: 'none',                         //fade, fadeAndPop, none
        animationspeed: 300,                       //how fast animtions are
        closeonbackgroundclick: true,              //if you click background will modal close?
        dismissmodalclass: 'close-reveal-modal' 
    });       
{% endif %}

  });
  </script>

Здесь, где проблема: http://shopmoonfall.bigcartel.com/

Теги:
modal-dialog

2 ответа

0

Ваша форма iframe имеет этот набор как функцию onload:

window.parent.scrollTo(0,0)

Вероятно, это вызывает скачок.

  • 0
    Что мне делать, если я хочу, чтобы топ # homeModal был установлен как "150px"?
  • 0
    Просто удалите это полностью. Код говорит вашей странице прокручивать страницу вверх, как только форма загружается.
Показать ещё 2 комментария
0

Я считаю, что это связано с загрузкой вашего CSS/заказа, который он загружает.

Я смог повторить проблему, добавив позицию как "абсолютный". Http://i.imgur.com/FDBhWSc.png?1

Мое предложение исправить это было бы поместить "position: relative" для самого начала вашего файла CSS в конце. Это может решить проблему (несколько).

На самом деле это не заставит его загружать всплывающее окно INSIDE, но оно должно быть почти мгновенным.

Как правильно загрузить его, почему бы вам не вскрыть всплывающее окно iFrame, содержащее форму.

  • 0
    Вытянул эту строку CSS до дна, и это не сработало. Что странно, это то, что до того, как я добавил "top" как "150px" в #homeModal, именно тогда начались прыжки. Когда "top" находится на "50px", он не прыгает.
  • 0
    Нет, убедитесь, что вы довели его до верха, а не до низа! Если вы не написали это неправильно изначально
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню