ポップアップモジュールの位置が高すぎるポップアップスクリプト

Question

私はこのコードのアプローチhttp://www.jqueryscript.net/lightbox/Super-Simple-Modal-Popups-with-jQuery-CSS3-Transitions.htmlをこのページのポップアップフォームに使用していますhttp://imagespace.businesscatalyst.com/canon-dr-systems.html [Inquire]リンクを押すとポップアップモジュールが有効になります。私の問題は、ポップアップボックスがスクリプトによってページの上部に配置されていることです。スタイル= "top：204.5px;"を追加しています。メインのdivに移動し、画面から外します。理想的には、それを起動する項目と同じ位置にポップアップしたいと思う。私はこれに影響を及ぼすために次のように変更する方法については全く分かりません。

（私は一時的にそれをする必要があるが、これは理想的な修正でない場合にダウンモジュールをプッシュさ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

Iがチェックあなたの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 
     }); 
    });*/