Prog Prog - 6 months ago 21
Javascript Question

How to make Foundation 5 Reveal Popup responsive?

I am using Foundation’s latest version Foundation 5, I want to use Reveal Popup in my project, I tried to implementing using following code and

.js
files.

It’s working fine in Large displays like Laptop and tablets, but when I try to open my page in small devices like mobile then it’s not showing properly I have to travel right and left in my mobile screen to see entire popup.


  • Included CSS

    <link href="../../Content/foundation/css/foundation.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/foundation/css/normalize.css" rel="stylesheet" type="text/css" />

  • HTML part



HTML Part

Included Script

Please help me or suggest me if I missed anything in above code.


  • image 2
    image2


Answer

Use the foundation's in-built grid classes large-10 small-10 medium-10

<div id="myModal" class="reveal-modal large-10 small-10 medium-10 columns" data-reveal>
  <h2>Popup title.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
  <a class="close-reveal-modal">&#215;</a>
</div>

And you have to remove this line of css :

.reveal-modal {
  width: 100vw; //remove this line from your css
}