jquery center element based on screen, not page size

Question

I have an element that is revealed using Zurb's Reveal Plugin , and I am having an issue with how it positions the modal window.

It seems to position the element in the center of the page, above the fold. however, if the modal window is activated by a link below the fold, the user is unable to see the window. Is there a way to center the element based on the current scrolling position instead of the entire page?

Here is, as far as I can tell, the relevant source code from the plugin:

Variables Set (ln 41):

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

Animating the Div (ln 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...

Full Source Code From GitHub

Answer 1

I had the same problem and I realised that I was calling the reveal function with a tag which had "#" in the href link.

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.

Removing this '#' from the link sorted the issue right out...

Hope that helps...

Answer 2

确保模态在页面主要部分的外部，而不是在行或列的内部，这对它们而言是不正确的相对父代。

Answer 3

I tried rest of the answers and ended up with:

 .reveal-modal{
    position: fixed; 
 }

Seems to work just fine, still animates and behaves as I would like it to.

Answer 4

Are your divs for the modals themselves within a row/column div block?

Example:

<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>

If this is the case the behavior you have described could occur.

From the documentation :

Remember : Your modal should be at the end of the page, after any of your rows or columns.

This code below would work correctly:

<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>

Answer 5

I wrote a simple script that fired on page load and looked for all reveal modals and then moved them to an empty target div just before the tag. This way I could keep all my modals wherever I wanted them to be for the sake of markup separation or to make it easier for others to follow/work-on.