彈出腳本定位彈出窗口模塊太高

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 
     }); 
    });*/