弹出脚本定位弹出窗口模块太高

Question

我在此页面上使用此代码方法http://www.jqueryscript.net/lightbox/Super-Simple-Modal-Popups-with-jQuery-CSS3-Transitions.html弹出窗口http://imagespace.businesscatalyst.com/canon-dr-systems.html点击查询链接可激活弹出窗口模块。我的问题是弹出框放在页面顶部的脚本，它是添加style =“top：204.5px;”到主div，这将它放在屏幕上。理想情况下，我希望它在与激活它的项目相同的位置弹出。我一点也不确定如何改变以下影响，对此的任何帮助都非常感谢。

（I已暂时添加的600px的这是推模块向下到它需要一个边距一个类，但是这不是一个理想的固定。）

<script> 
     $(function() { 

      var appendthis = ("<div class='modal-overlay js-modal-close'> </div>"); 

      $('a[data-modal-id]').click(function(e) { 
       e.preventDefault(); 
       $("body").append(appendthis); 
       $(".modal-overlay").fadeTo(500, 0.7); 
       //$(".js-modalbox").fadeIn(500); 
       var modalBox = $(this).attr('data-modal-id'); 
       $('#' + modalBox).fadeIn($(this).data()); 
      }); 


      $(".js-modal-close, .modal-overlay").click(function() { 
       $(".modal-box, .modal-overlay").fadeOut(500, function() { 
        $(".modal-overlay").remove(); 
       }); 

      }); 

      $(window).resize(function() { 
       $(".modal-box").css({ 
        top: ($(window).height() - $(".modal-box").outerHeight())/2, 
        left: ($(window).width() - $(".modal-box").outerWidth())/2 
       }); 
      }); 

      $(window).resize(); 

     }); 
    </script> 

Answer 1

我检查您的website。并建议在CSS下应用。 即，使模态弹出position:fixed;。它会帮助你在同一个地方弹出。

.modal-box { 
    display: block; 
    top: 0; 
    left: 0; 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    z-index: 99999; 
    margin: auto; 
} 

还从您的js中删除窗口调整大小功能。

/* $(window).resize(function() { 
     $(".modal-box").css({ 
      top: ($(window).height() - $(".modal-box").outerHeight())/2, 
      left: ($(window).width() - $(".modal-box").outerWidth())/2 
     }); 
    });*/