Menu icon Foundation
F6 Reveal Modal Suggestions

Hey everyone! On the forum and GitHub we saw that people are struggling with the Foundation 6 Reveal modal. We'd love to get a discussion going on issues you have experienced or workarounds you've discovered with the new Reveal modal (especially with Safari).

What we're hearing:
Issues with with positioning on certain configurations.
- Too much top offset in certain cases
- Positioning is off in essentials download (missing HTML height:100%;)
- If the content is taller than the screen
- and some issues with Safari, scrolling in particular

There has been a lot of changes to the modal code in 6.2 Release Candidate branch. We're getting the 6.2 Release Candidate out two weeks ahead of the point release to thoroughly test changes before they go live. It would be awesome if you can checkout this release candidate as see if the new code solves the issues.

We'd love to hear more about how you're using the Reveal modal and your experience with it.

revealmodalreveal modalpopupfoundation 6

Hey everyone! On the forum and GitHub we saw that people are struggling with the Foundation 6 Reveal modal. We'd love to get a discussion going on issues you have experienced or workarounds you've discovered with the new Reveal modal (especially with Safari).

What we're hearing:
Issues with with positioning on certain configurations.
- Too much top offset in certain cases
- Positioning is off in essentials download (missing HTML height:100%;)
- If the content is taller than the screen
- and some issues with Safari, scrolling in particular

There has been a lot of changes to the modal code in 6.2 Release Candidate branch. We're getting the 6.2 Release Candidate out two weeks ahead of the point release to thoroughly test changes before they go live. It would be awesome if you can checkout this release candidate as see if the new code solves the issues.

We'd love to hear more about how you're using the Reveal modal and your experience with it.

Toon over 3 years ago

Well, here is simple codepen example with single Reveal modal and some text paragraphs: http://codepen.io/anon/pen/WrBJLx

F6.2RC

Before Reveal open: https://i.gyazo.com/503732d6ae74621fa4c0502b773b9e93.png

After: https://i.gyazo.com/1ebe7f18c10bd823cde908566d8c7e50.png

Problems:

Page was scrolled to bottom (why?)
Body tag scrollbar removed (affects page width)
Modal position is incorrect.

Tested on latest Chrome, FF, IE, Edge.

Christian Magill over 3 years ago

There's also an issue with full sized modals.

You can see in the example here there is space on the left hand side.

http://codepen.io/christianmagill/pen/WrBagd

Christian Magill over 3 years ago

There's an 8px transform added directly to the modal through Javascript which is causing the issue on full-sized.

I'd also love to see a class added when modals are activated so that I could hook in css transitions.

Josh Rubin over 3 years ago

global closeOnClick setting not working...

After Initializing foundation I added the following code:

Foundation.Reveal.defaults.closeOnClick = false;

It appears to update the object setting, but doesn't seem to work.

I am however able to set the property via the data attribute like so:

data-options="closeOnClick:false;"

Thanks!

JK over 3 years ago

i checked the reveal modal in the develop branch in docs

for me

-Page scrolls a amount down on Reveal Open
-Fullscreen Modal has left an Right Whitespace and is NOT Closable
-Position of all Modal is Bottom
-Click me for an overlay-lacking modal NOT Closeable

-Position of animated Modal seems to be correct position and also no scroll on page

checked on FF,IE,Edge,Chrome

Kevin Ball over 3 years ago

Hi folks,

I'm working on fixing the various reveal modal bugs, and have some work on this done in this branch: https://github.com/zurb/foundation-sites/tree/reveal-modal-issues

I believe this addresses all of the most blatant bugs, but would love it if you can check it out and verify.

One thing to note is that having no on-page scroll while a modal is open is by design - my understanding is that is a deliberate change from F5 to F6 due to a number of issues with the scrolling under the modal. We can definitely talk about if that is the right design decision, but that is a bigger discussion.

But most of the other issues raised here are definitely bugs, and I think I've got them all addressed in that branch. I'll be merging that in next week, so if it doesn't fix the problems you're seeing please highlight it to me as soon as possible.

Regards,
Kevin

Christian Magill over 3 years ago

That branch actually makes my issue worse. Even cutting down my code to it's simplest form shown below, the full reveal modal shows up underneath the the link as opposed to covering the entire screen.

<!doctype html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <title>Martin Engineering</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="/dist/styles/main.css">
</head>
<body>

<a href="#" data-toggle="contact-modal">Contact Us</a>
<div class="full reveal" id="contact-modal" data-reveal>
  <p>OH I'M SO FUUUUL</p>
  <img src="http://placekitten.com/1920/1280" alt="Intropsective Cage">
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<script src="/dist/scripts/jquery.js"></script>
<script src="/dist/scripts/main.js"></script>
</body>
</html>

Christian Magill over 3 years ago

The 8px translation on the element also persists.

And when I try something more complex like the below, the reveal modal doesn't even show up when triggered.

<!doctype html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <title>Martin Engineering</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="/dist/styles/main.css">
</head>
<body>


<div class="off-canvas-wrapper">
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

    <!-- off-canvas left menu -->
    <div class="off-canvas off-canvas-menu position-left" id="off-canvas-menu" data-off-canvas>
      <ul class="vertical menu" data-accordion-menu>
        <li>
          <a href="#">Home</a>
          <ul class="menu vertical nested">
            <li><a href="#">Item 1A</a></li>
            <li><a href="#">Item 1B</a></li>
            <li><a href="#">Item 1C</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Why Us</a>
          <ul class="menu vertical nested">
            <li><a href="#">Item 2A</a></li>
            <li><a href="#">Item 2B</a></li>
            <li><a href="#">Item 2C</a></li>
          </ul>
        </li>
        <li><a href="#">Industries</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

    <!-- original content goes in this container -->
    <div class="off-canvas-content main-canvas" data-off-canvas-content>

      <!-- off-canvas title bar for 'small' screen -->
      <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
        <div class="title-bar-left">
          <button class="menu-icon" type="button" data-open="off-canvas-menu"></button>
          <span class="title-bar-title">Martin</span>
        </div>
      </div>

      <!-- "wider" top-bar menu for 'medium' and up -->
      <div id="main-menu" class="top-bar main-menu">
        <div class="row column">
          <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
              <li class="menu-text">Test</li>
              <li>
                <a href="#">Testing</a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="main-content" id="main-content">
        <div class="show-for-medium" data-sticky-container>
          <div class="sticky" id="example" data-sticky data-margin-top="0" style="width:100%;" data-margin-bottom="0" data-anchor="main-content">
              <nav class="content-menu" data-magellan>
                <div class="row column">
                  <ul class="horizontal menu -expanded">
                    <li><a href="#section-intro">Features / Benefits</a></li>
                    <li><a href="#section-solutions">Solutions</a></li>
                    <li><a href="#section-case-studies">Case Studies</a></li>
                  </ul>
                </div>
              </nav>

          </div>
        </div>

        <style>
          section{
            min-height: 400px;
          }
        </style>

        <section class="section-intro" id="section-intro" data-magellan-target="section-intro">Intro</section>
        <section class="section-bullets" id="section-bullets">Bullets</section>
        <section class="section-solutions" id="section-solutions" data-magellan-target="section-solutions">Solutions</section>
        <section class="section-case-studies" id="section-case-studies" data-magellan-target="section-case-studies">Case Studies</section>

        <section class="testing">
          <a href="#" data-toggle="contact-modal" class="action-button">Contact Us <i class="fa fa-arrow-right"></i></a>
        </section>

        <div class="full reveal" id="contact-modal" data-reveal>
          <p>OH I'M SO FUUUUL</p>
          <img src="http://placekitten.com/1920/1280" alt="Intropsective Cage">
          <button class="close-button" data-close aria-label="Close reveal" type="button">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="/dist/scripts/jquery.js"></script>
<script src="/dist/scripts/main.js"></script>
</body>
</html>

Kevin Ball over 3 years ago

Hi @Christian Magill , thanks for trying it out so quickly and the detailed examples. I'll import them as test cases and see what I can figure out.

Regards,
Kevin

Christian Magill over 3 years ago

No worries, thanks for your help on solving these issues.

JK over 3 years ago

checked out the reveal-modal-issues branch
looked at the examples in docs, looks good so far, now i check my own examples and we will see ;-)

the left whitespace on fullscreen modal still exists i think it's because the left is calculated and then after open the scrollbar disappear, or the window width is returned with the scrollbar
better say the width of the element is calculated with the right scrollbar, the the reveal opens and the scrollbar disappear, so we have the (outerwidth - width)/2 what seams to be in my case 16px left

on android stock browser the without a overlay is pretty small, think there is no width given through css?

couldn't test it on iOS

Glynn Williams about 3 years ago

Hi all.

Please see my post (http://foundation.zurb.com/forum/posts/38411-reveal-opening-half-way-down-page-and-not-the-window), where I was having issues. Most seem to be resolved now, but I have two other ones.

  1. When using the very popular AddThis icons, that slide in from the left or right, the grey background overlay doesn't continue to the end of the horizontal page, stopping just 15 pixels short of the right hand side. I removed the icons and the overlay flows correctly. Some some setting of AddThis and the Reveal JS are conflicting.

  2. Once the reveal has opened, I can still scroll down the page. Whereas the example page in Docs, I can't scroll. So why does my page allow the scrolling? How do I stop it? Because if I scroll, the content below the window is not there, just a grey area.

If you look at my post there are screen grabs of the above.

Cheers
Glynn

Joshua Dean about 3 years ago

I've implemented the 6.2 stable release in my local environment and have included the differences between that branch and the reveal-modal-issues branch (which appears to just be one line in the JS: https://github.com/zurb/foundation-sites/compare/6.2-stable...reveal-modal-issues).

All my modals are appearing in the bottom-right corner of the window. If I try to resize the window, the modal disappears. Also, when opening the modal, the background content disappears altogether.

Kevin Ball about 3 years ago

@Joshua Dean can you link to your example showing that problem, or include some sample code? And double check you're using 6.2-stable and not 6.2-dev? That sounds like an issue that was in the 6.2 rc1 (which is in 6.2-dev) but that I addressed in 6.2-stable.

Thanks,
Kevin

Joshua Dean about 3 years ago

@Kevin Ball I've verified that I'm using 6.2-stable. I downloaded the ZIP from this URL: https://github.com/zurb/foundation-sites/tree/6.2-stable. I always just grab the foundation.min.js file in the dist directory—so the only way I don't have the write code is if that JS file in dist hasn't been compiled correctly or recently. Not sure if that's even a possibility.

I'm trying to get our staging environment updated so that I can send a link. Standby.

Joshua Dean about 3 years ago

@Kevin Ball Below is a link. Scroll to the bottom of the page and click the brown "Already found a home?" button. Let me know what you think might be going on.

https://www-homie-staging.azurewebsites.net/buy

Kevin Ball about 3 years ago

Hi @Joshua Dean ,

Thank you for the link! I took a look, and after digging through your minified CSS and JS I'm not sure what's happening in your build step, but it does look like perhaps the JS is loading an older version. In particular, while it looks like the css appears to have be up to date (though it's a little hard to tell comparing minified to scss, I see my updated styles) the JS still contains code that is eliminated in 6.2-stable (in particular I'm seeing the function _cacheValues).

The dist files are updated on release, but not on every code change... when testing from a branch like this, probably the best is to run 'gulp build' and then use the files from the '_build/assets' directory. If you haven't previously gotten your build environment set up you will need to run 'npm install' before doing this.

Regards,
Kevin

Joshua Dean about 3 years ago

@Kevin Ball You're right, that worked! Sorry for the wild-goose chase. I appreciate your help.

So, I've tested the new reveal modals and they work a ton better. The scrolling experience seems to be working great.

I do have two suggestions, though (let me know if there is a way to change these settings and I just don't know it):

  1. It would be nice if, in narrow environments, you could define the spacing between the left and right sides. Right now the modal is flush horizontally to the edges of the screen, which feels odd to me.

  2. If the modal is taller than the height of the window, when scrolling down the bottom of the modal is flush with the bottom of the screen. It would be nice to set some spacing there as well.

Nice work on this!!

Christian Magill about 3 years ago

@Kevin Ball

My previous example now goes full screen properly, yeah!, however clicking on the trigger resets page to top. I have tried removing the "#" href, but this does not improve the situation. By setting the opacity of the modal, I see that this happens on modal trigger instead of close.

I'm using 6.2 release...

Rafi Benkual about 3 years ago

Hey Everyone!

Thanks to these people for jumping in here with your feedback and testing!
@Christian Magill
@Joshua Dean
@Glynn Williams
@JK
@Toon

We worked together to make this component better! We released 6.2 on Friday with lot's of fixes and new features including a couple for the reveal modal - http://zurb.com/article/1427/foundation-for-sites-6-2-leading-the-way-

We'd love to know how the Reveal modal is working for you in 6.2 and how you're using it!