Menu icon Foundation
Zurb Reveal does'nt take into account scrolling

Hello. I have a reveal modal that is opening, but it's not taking into account the vertical scroll amount. In the app I'm creating, the user has a list of data elements where the user can take actions against each line item. The modal containing the actions works great until the user starts to scroll to items below the fold. The modal still shows, but the user has to scroll back to top to see the modal. The modal opening needs to take into account the vertical scroll. How can I fix this? Thanks.

Foundationrevealmodalscrolling

Hello. I have a reveal modal that is opening, but it's not taking into account the vertical scroll amount. In the app I'm creating, the user has a list of data elements where the user can take actions against each line item. The modal containing the actions works great until the user starts to scroll to items below the fold. The modal still shows, but the user has to scroll back to top to see the modal. The modal opening needs to take into account the vertical scroll. How can I fix this? Thanks.

Rafi Benkual almost 6 years ago

It is difficult to see exactly what you mean without a visual example. Any screenshots or code examples will really help everyone understand so we can help you.

Thanks!

Tom Schreck almost 6 years ago

hi Rafi. Thanks for the reply. Here's a link to a video:

http://screencast.com/t/jaSQWRLduWx

In it you will see that I can open a modal but when I scroll down the page because there are a lot of items, the modal is opened off-screen. Zurb is not taking into account the scroll amount when rendering the modal. I'm using latest version of Firefox to test the app I'm building.

 $("#ChangeOrderQuantityModal").foundation("reveal", "open");
        <div id="ChangeOrderQuantityModal" class="reveal-modal small" data-reveal>
          <form>
            <label for="ChangeQuantityOrdered">Order Quantity:</label>
            <input type="text" name="ChangeQuantityOrdered" id="ChangeQuantityOrdered" class="numeric" placeholder="Order Quantity" maxlength="10"/>

            <a href="#" class="button tiny" data-bind="click:PutChangeOrderQuantity">Submit</a>
            <a class="close-reveal-modal">&#215;</a>
          </form>
        </div>

Loki Loq almost 6 years ago

Try this in your stylesheet, it solved the problem for me.

.reveal-modal{
    position : fixed;
}

Renier Santander Yhanes almost 6 years ago

Loki Loq you are a genius!!! ggggg

Neil Haskins over 5 years ago

I'm having the same issue (and yes, setting position: fixed; does solve it), but I'm wondering what's causing the problem.
In the docs they have several modals which launch correctly, but on my site the javascript isn't working to calculate the vertical position of the modal. It always is given top: 100px;.
Is an earlier version of the js being used in the docs?

I'll post my page code here in case I'm doing something wrong. (I've included several paragraphs of lorum ipsum text, just so there's something to scroll down through.)

<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" >

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Title here</title>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600,700,800' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="../stylesheets/app.css" />

  <script src="../bower_components/foundation/js/vendor/modernizr.js"></script>
</head>
<body>
  <div class="row">
    <div class="small-12 columns">
      <p>Nulla ut sodales erat, vel posuere magna. Nam et tellus purus. Etiam odio turpis, gravida quis tincidunt ac, posuere id sapien. Donec blandit velit nec justo suscipit, eu vehicula nulla hendrerit. Praesent pharetra turpis sed massa porta tempus. Nulla vitae venenatis eros. Sed tortor lacus, sollicitudin ut ante ac, blandit convallis ante. Pellentesque dictum aliquet enim, quis mattis nunc fermentum non. Vestibulum ultrices tellus felis, in convallis est gravida vel. Nullam ut nunc sed nisl rutrum facilisis. Aliquam dui dui, fringilla et auctor sit amet, faucibus quis nisl. Morbi massa elit, aliquet in porttitor ut, congue ac diam. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed sollicitudin risus. Fusce ut fringilla enim. Vestibulum semper ipsum vitae massa semper, sit amet viverra lorem ornare. In elementum nulla a varius tristique. Donec nec risus at ante lacinia suscipit. Nam auctor vel tellus ultrices aliquam. Etiam eget urna sed velit varius vestibulum a id metus. Maecenas sagittis dolor et ante vehicula, nec semper nibh elementum. Nulla facilisi. Donec sapien ante, consequat eu erat ac, fermentum auctor lacus. Quisque enim velit, aliquet id nisi quis, placerat aliquet dui. Donec tempus, eros sit amet sodales dictum, elit nisi vulputate tortor, ac tincidunt turpis ante nec sapien. Ut vitae tristique orci, varius dignissim enim. Mauris sed condimentum sem, non dapibus mi.</p>
      <p>Nulla molestie turpis fringilla lacus adipiscing bibendum. Etiam accumsan quam vel quam eleifend, eu auctor dui aliquam. Maecenas in nisi sed felis auctor vestibulum. Donec a mi a dui posuere sodales. Nam vehicula purus augue, quis imperdiet enim posuere non. Proin ac est felis. Praesent consectetur pretium est, at facilisis nunc aliquet in. Pellentesque interdum tempus libero vel bibendum. Nunc facilisis facilisis elit, id tincidunt nisl tincidunt ac. Sed placerat ornare rutrum. Nam laoreet congue faucibus. Proin luctus, nisl vel feugiat luctus, tortor tortor elementum lorem, eget tempor velit tellus vel orci. Quisque pellentesque pellentesque magna eget porttitor. Sed ultrices, nisl eget blandit pulvinar, nibh ante fermentum nulla, volutpat congue arcu risus ut felis. Donec sollicitudin eu velit at aliquet. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed sollicitudin risus. Fusce ut fringilla enim. Vestibulum semper ipsum vitae massa semper, sit amet viverra lorem ornare. In elementum nulla a varius tristique. Donec nec risus at ante lacinia suscipit. Nam auctor vel tellus ultrices aliquam. Etiam eget urna sed velit varius vestibulum a id metus. Maecenas sagittis dolor et ante vehicula, nec semper nibh elementum. Nulla facilisi. Donec sapien ante, consequat eu erat ac, fermentum auctor lacus. Quisque enim velit, aliquet id nisi quis, placerat aliquet dui. Donec tempus, eros sit amet sodales dictum, elit nisi vulputate tortor, ac tincidunt turpis ante nec sapien. Ut vitae tristique orci, varius dignissim enim. Mauris sed condimentum sem, non dapibus mi.</p>
      <a data-reveal-id="poNumbers" class="button" href="#">Launch the Modal</a>
      <div id="poNumbers" class="reveal-modal" data-reveal>
        <p>This is a modal.</p>
        <a class="close-reveal-modal">&#215;</a>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed sollicitudin risus. Fusce ut fringilla enim. Vestibulum semper ipsum vitae massa semper, sit amet viverra lorem ornare. In elementum nulla a varius tristique. Donec nec risus at ante lacinia suscipit. Nam auctor vel tellus ultrices aliquam. Etiam eget urna sed velit varius vestibulum a id metus. Maecenas sagittis dolor et ante vehicula, nec semper nibh elementum. Nulla facilisi. Donec sapien ante, consequat eu erat ac, fermentum auctor lacus. Quisque enim velit, aliquet id nisi quis, placerat aliquet dui. Donec tempus, eros sit amet sodales dictum, elit nisi vulputate tortor, ac tincidunt turpis ante nec sapien. Ut vitae tristique orci, varius dignissim enim. Mauris sed condimentum sem, non dapibus mi.</p>
      <p>Ut vitae lorem a ligula laoreet elementum sit amet at ante. Sed egestas pharetra luctus. Praesent at nisi eget justo euismod pellentesque id vitae odio. Nunc at vulputate metus. Donec pretium ligula vestibulum varius molestie. Duis tempor, diam quis consectetur consectetur, eros purus varius tellus, ac euismod leo urna eget arcu. Nunc rutrum sodales tortor ut dictum. Nulla vel augue libero. Aliquam nulla dui, tempor in purus pretium, laoreet molestie arcu. Quisque mattis lacinia nibh sed rutrum. Phasellus pharetra libero vitae dolor pretium lobortis. Aliquam in orci id urna accumsan vulputate. Curabitur at vestibulum odio. Integer fermentum semper dapibus. Suspendisse a adipiscing lectus. Ut justo odio, sodales eu orci sed, vehicula mattis magna. </p>
      <p>Nulla ut sodales erat, vel posuere magna. Nam et tellus purus. Etiam odio turpis, gravida quis tincidunt ac, posuere id sapien. Donec blandit velit nec justo suscipit, eu vehicula nulla hendrerit. Praesent pharetra turpis sed massa porta tempus. Nulla vitae venenatis eros. Sed tortor lacus, sollicitudin ut ante ac, blandit convallis ante. Pellentesque dictum aliquet enim, quis mattis nunc fermentum non. Vestibulum ultrices tellus felis, in convallis est gravida vel. Nullam ut nunc sed nisl rutrum facilisis. Aliquam dui dui, fringilla et auctor sit amet, faucibus quis nisl. Morbi massa elit, aliquet in porttitor ut, congue ac diam. </p>
    </div>
  </div>
<script src="../bower_components/foundation/js/vendor/jquery.js"></script>
<script src="../bower_components/foundation/js/foundation.min.js"></script>
<script>$(document).foundation();</script>>
</body>
</html>

Thanks

Neil Haskins over 5 years ago

I had set html{overflow: hidden;} as a firefox specific hack (I believe to fix an issue with breakpoints and the scrollbar).
After commenting out the above rule, the modal positions itself properly.

FranzZemen over 5 years ago

Ok I was having the same issue. Really dumb mistake on my part, but it could be something others run into so for the 2 hours I spent trying to figure this out, I'm posting my stupidity so others don't have to.

I was seemingly having the same issue, i.e. when I scroll the modal from the same link pops up in the wrong spot. I noticed that in the zurb docs this does not happen.

In my case, I'm opening the modal with a hyperlink click handler, not the data-reveal-id link.

Well it turns out my click handler was not returning false, so the resulting behavior was:
1) Foundation correctly positions the modal
2) My page scrolls back up, with the modal going out of position

Not sure why I didn't notice the fact I was returning back to the top of the page.

Solution is remember to have your click handler return false if you don't want the default behavior of going back to top of page.