Take the 2-minute tour ×

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'),                                                                                                         

Animating the Div (ln 61)

 function openAnimation() {                                                                                                                    
    if (!locked) {                                                                                                                              
      if (options.animation === "fadeAndPop") {                                                                                                 
            '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 () {                                                                                                


Full Source Code From GitHub

share|improve this question
Actucally the plugin does take care of that: $(document).scrollTop() gets the position, the user scrolled to: api.jquery.com/scrollTop I guess there some other conflicts on your site... –  SamiSalami Aug 10 '12 at 15:58

5 Answers 5

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

share|improve this answer

Make sure your modal is outside of the main section of your page and not inside rows or columns that would be an incorrect relative parent for them.

share|improve this answer

I tried rest of the answers and ended up with:

    position: fixed; 

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

share|improve this answer

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


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

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

share|improve this answer

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.

share|improve this answer

Your Answer


