CODEWITHSUNDEEP
javascriptjquerycssruby-on-railszurb-foundation
Petros Kyriakou
Petros Kyriakou

Reputation: 5343

Foundation Reveal Modal out of visible area

I am trying to use modals by using Foundation 5 in a rails app

The thing is, the modal works if you are not scrolled down the page.

If you go to bottom and click the button for the modal, while it activates,it is not shown.

Is there a bug in this or i am doing something wrong?

<%= link_to "Register to Unlock", new_subscription_path, class:"unlock", "data-reveal-id" => "firstModal" %>


<!-- Reveal Modals begin -->
<div id="firstModal" class="reveal-modal" data-reveal aria-labelledby="firstModalTitle" aria-hidden="true" role="dialog">
  <h2 id="firstModalTitle">This is a modal.</h2>
  <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
  <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
  <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

<div id="secondModal" class="reveal-modal" data-reveal aria-labelledby="secondModalTitle" aria-hidden="true" role="dialog">
  <h2 id="secondModalTitle">This is a second modal.</h2>
  <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

Upvotes: 0

Views: 101

Answers (1)

prettyInPink
prettyInPink

Reputation: 3444

I don't think it is a bug and there should be made a modification in the script depending on your case. You could modify the css property of the modal by setting it to 'fixed' instead of 'absolute'. Be aware though to add some code when viewing it on smaller screens where the modal might be too tall and there is overflow.

Upvotes: 1

Related Questions