Центральный элемент jquery на основе экрана, а не размера страницы

У меня есть элемент, который раскрывается с помощью плагина Reveal Zurb, и у меня есть проблема с тем, как он позиционирует модальное окно.

Кажется, что элемент расположен в центре страницы, над сгибом. однако, если модальное окно активируется по ссылке ниже сгиба, пользователь не может видеть окно. Есть ли способ центрировать элемент на основе текущей позиции прокрутки, а не всей страницы?

Вот, насколько я могу судить, соответствующий исходный код плагина:

Набор переменных (строка 41):

var modal    = $(this),
topMeasure = parseInt(modal.css('top'), 10),                                                                                                
topOffset  = modal.height() + topMeasure,                                                                                                   
locked     = false,                                                                                                                         
modalBg    = $('.reveal-modal-bg'),                                                                                                         
closeButton;   

Анимация элемента Div (стр. 61)

 function openAnimation() {                                                                                                                    
    if (!locked) {                                                                                                                              
      lockModal();                                                                                                                              
      if (options.animation === "fadeAndPop") {                                                                                                 
        modal.css({                                                                                                                             
            'top': $(document).scrollTop() - topOffset,                                                                                         
            'opacity': 0,                                                                                                                       
            'visibility': 'visible'                                                                                                             
        });                                                                                                                                     
        modalBg.fadeIn(options.animationSpeed / 2);                                                                                             
        modal.delay(options.animationSpeed / 2).animate({                                                                                       
          "top": $(document).scrollTop() + topMeasure + 'px',                                                                                   
          "opacity": 1                                                                                                                          
        }, options.animationSpeed, function () {                                                                                                
          modal.trigger('reveal:opened');                                                                                                       
        });                                                                                                                                     

      }   
      //etc...

Полный исходный код с GitHub


person GSto    schedule 10.08.2012    source источник
comment
На самом деле плагин позаботится об этом: $(document).scrollTop() получает позицию, которую пользователь прокрутил до: api.jquery.com/ scrollTop Думаю, на вашем сайте есть еще какие-то конфликты...   -  person SamiSalami    schedule 10.08.2012


Ответы (5)


У меня была та же проблема, и я понял, что вызываю функцию раскрытия с тегом, который имеет «#» в ссылке href.

Calling this reloaded the page before the reveal function was called so the screen position of the reveal modal jumped to the co-ordinates of the screen when the reveal button was pushed causing the modal screen to appear half off the screen.

Удаление этого '#' из ссылки решило проблему...

Надеюсь, это поможет...

person Jow    schedule 29.11.2012

Убедитесь, что ваше модальное окно находится за пределами основного раздела вашей страницы, а не внутри строк или столбцов, которые были бы для них неправильным относительным родителем.

person Jonathan Smiley    schedule 10.08.2012

Я попробовал остальные ответы и в итоге:

 .reveal-modal{
    position: fixed; 
 }

Кажется, работает просто отлично, все еще оживляет и ведет себя так, как мне хотелось бы.

person Graham P Heath    schedule 15.08.2013

Ваши div для самих модальных окон находятся в блоке div строк/столбцов?

Пример:

<div class="row">
  <div class="twelve columns">
    <div id="featured"><a href="" data-reveal-id="viewModal">View My Modal</a></div>
    <div id="viewModal" class="reveal-modal large">My Modal</div>
  </div>
</div>

Если это так, то поведение, которое вы описали, может иметь место.

Из документации:

Помните: ваше модальное окно должно быть в конце страницы, после любой из ваших строк или столбцов.

Этот код ниже будет работать правильно:

<div class="row">
  <div class="twelve columns">
    <div id="featured"><a href="" data-reveal-id="viewModal">View My Modal</a></div>
  </div>
</div>

<div id="viewModal" class="reveal-modal large">My Modal</div>
person Charles Wesley    schedule 27.12.2012

Я написал простой скрипт, который срабатывал при загрузке страницы и искал все модальные окна, а затем перемещал их в пустой целевой div непосредственно перед тегом. Таким образом, я мог хранить все свои модальные окна там, где хотел, ради разделения разметки или для того, чтобы другим было легче следить за ними/работать над ними.

person Chris Kobar    schedule 04.06.2013