javascript - 为什么我的模态对话框窗口中的 "newsletter sign-up"表单会跳转？

Question

我有一个模态窗口出现在主页上的每个页面加载上(稍后会修改)，但是窗口内的“电子邮件注册”表单加载方式存在问题。

表单将随机出现在网站顶部一秒钟，然后跳到模式窗口内它应该出现的位置，这显然不是我想要的。我希望它始终像预期的那样加载到模态内部。

这是模式的设置:

<!--
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's 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/

Answer 1

我认为这与您的 CSS 加载/加载顺序有关。

通过将位置添加为“绝对”，我能够在某种程度上重现该问题 http://i.imgur.com/FDBhWSc.png?1

我的修复建议是将 'position: relative' 放置在 CSS 文件的开头，就像它在末尾一样。这可能会(在一定程度上)解决问题。

这实际上不会使其在弹出窗口中加载，但它“应该”几乎是瞬时的。

至于如何让它正确加载，为什么不让整个弹出窗口成为一个包含表单的 iFrame。