Menu icon Foundation
Vertical Scroll reveal-modal

Hi Guys,

I'm having difficulty getting reveal-modal to vertical scroll correctly.

Currently I'm using it to display additional information that extends below the fold. i've tried several things including:

.reveal-modal {overflow: scroll}

I've also tried setting the position to fixed.

So far the body will scroll so you can view the additional content, but there is no movement within the modal itself. Code and image included.

Help really appreciated :)

Modal

            

         

    <!-- begin Modals -->

    <div id="firstModal" class="reveal-modal" data-reveal>

        <div class="row">
            <div class="column small-12">
                <img src="img/Moroccan%20Beef.jpg" alt="moroccan Beef" />
            </div>
        </div>
        <!-- end image row -->
        <div class="row">
            <div class="column small-12 medium-9">
                <!-- title and intro block -->
                <h2>Moroccan Beef</h2>
                <p>I like beef</p>
            </div>
            <div class="column small-12 medium-3 pot-graphic">
                <img src="img/mison-chicken.png" />
            </div>

        </div>
        


        <a class="close-reveal-modal">&#215;</a>
    </div>
    <!-- / first modal -->

            

         

verticalscrollreveal-modalmodal

Hi Guys,

I'm having difficulty getting reveal-modal to vertical scroll correctly.

Currently I'm using it to display additional information that extends below the fold. i've tried several things including:

.reveal-modal {overflow: scroll}

I've also tried setting the position to fixed.

So far the body will scroll so you can view the additional content, but there is no movement within the modal itself. Code and image included.

Help really appreciated :)

Modal

            

         

    <!-- begin Modals -->

    <div id="firstModal" class="reveal-modal" data-reveal>

        <div class="row">
            <div class="column small-12">
                <img src="img/Moroccan%20Beef.jpg" alt="moroccan Beef" />
            </div>
        </div>
        <!-- end image row -->
        <div class="row">
            <div class="column small-12 medium-9">
                <!-- title and intro block -->
                <h2>Moroccan Beef</h2>
                <p>I like beef</p>
            </div>
            <div class="column small-12 medium-3 pot-graphic">
                <img src="img/mison-chicken.png" />
            </div>

        </div>
        


        <a class="close-reveal-modal">&#215;</a>
    </div>
    <!-- / first modal -->

            

         

John Moses almost 5 years ago

You need a height attribute.

#firstModal{
  height: 500px;
  overfill: scroll;
}