2015-02-17 3 views
0

Я работаю над всплывающим окном на веб-странице, которая облегчает работу с вершины окна с помощью двойника. Я использовал функцию scrollTop, чтобы применить всплывающее окно в позиции прокрутки. т. Е. При нажатии кнопки она появляется на вдове в положении прокрутки.Функция ScrollTop не работает с firefox

Проблема в том, что он отлично работает в «Google Chrome», но в firefox он даже не отображается.

Вот мой JQuery код ....

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script> 
<script> 
    $(document).ready(function() { 
     var $obj = $(".modal") 
       , $overlay = $(".modal-overlay") 
      , blur = $("#blur-filter").get(0) 
     ; 

     function setBlur(v) { 
      blur.setAttribute("stdDeviation", v); 
     } 
     function getPos() { 
      return $obj.position(); 
     } 

     var lastPos = getPos(); 
     function update() { 
      var pos = getPos(); 
      var limit = 20; 
      var dx = Math.min(limit, Math.abs(pos.left - lastPos.left) * 0.5); 
      var dy = Math.min(limit, Math.abs(pos.top - lastPos.top) * 0.5); 
      setBlur(dx + "," + dy); 

      lastPos = pos; 
      requestAnimationFrame(update); 
     } 
     update(); 

     var isOpen = false; 
     function openModal() { 
      /*$overlay.css({ 
       display:"block" 
      })*/ 

      TweenMax.to($overlay, 0.1, { autoAlpha: 1 }); 

      TweenMax.fromTo($obj, 0.6, { y: -($(window).height() + $obj.height() - $(window).scrollTop()) }, { delay: 0.2, y: $(window).scrollTop(), ease: Elastic.easeOut, easeParams: [1.1, 0.7], force3D: true }); 
     } 
     function closeModal() { 
      TweenMax.to($overlay, 0.1, { delay: 0.55, autoAlpha: 0 }); 
      TweenMax.to($obj, 0.55, { y: $(document).height() + $obj.height(), ease: Back.easeIn, force3D: true }); 
     } 
     $(".open-modal").click(function() { 
      openModal(); 
     }) 
     $(".close-modal,.modal-overlay").click(function() { 
      closeModal(); 
     }) 

    }) 
</script> 
+1

Вы уверены, что проблема связана с 'scrollTop'? – rednaw

+0

Любые ошибки в консоли? – janfoeh

+0

Прежде всего спасибо за быстрый ответ, и да, я так думаю, потому что он отлично работает в google chrome, если вы говорите, что я дам вам код css. –

ответ

0

Ваш Javascript работает отлично; это

filter: url("#blur") 

, что, похоже, не работает. Удалите его или попробуйте заменить его на Firefox' standard implementation размытого фильтра.

+0

Большое вам спасибо за ваш ответ, теперь он отлично работал в firefox. :) Еще раз спасибо, хотя я хочу проголосовать за вас. Но моя репутация остановила меня. Им нужно по крайней мере 15, и у меня есть 1, поскольку я новичок. –

+0

@SameerKorde не беспокойтесь об этом, я рад, что он решил вашу проблему! Но, пожалуйста, отметьте ответ как «принятый», поэтому ваш вопрос больше не будет отображаться как «без ответа» другим. – janfoeh

Смежные вопросы