Modal Reveal not working in subtheme (css issue) & for status messages (attribute)

In the starter theme's scss/base/_drupal.scss it's setting the z-index to be below the default for the reveal modal bg (1004):

// Fix Zurb Foundation Reveal Modal z-index and make it play nice with dropdown
// menus, lightboxes, etc.
.reveal-modal {
  z-index: 999;
}

I was able to fix the background positioning by adding this:

// Fix Zurb Foundation Reveal Modal z-index and make it play nice with dropdown
// menus, lightboxes, etc.
.reveal-modal {
  z-index: 999;
}
.reveal-modal-bg {
  z-index: 998;
}

This fixes the styles, but I can't seem to get the close button to work - any thoughts?

Yeah, it seems that using the theme option to show status messages in the reveal is missing an attribute for "data-reveal", which in turn breaks the closing functionality.

I have attached a patch that fixes the scss & css in the STARTER theme as well as the missing attribute.

Patch by nsciacca worked for me. I was able to patch my existing sub-theme. Thanks!

While the patch did not apply for me, I think the solution was mainly to set the z-index for the bg element, and ensure that the output has the correct attributes, and the problem for me was solved.

Likewise, I successfully applied patch in #3 (ran it with -p1 option in terminal, i.e. patch -p1 < modal_reveal-2465653.patch). Fixed same modal issue for me. Thanks nsciacca!

Seems this is RTBC then!

#3 fixes the issue for me too.

There is a big CSS change included in this patch? If we straighten this out I can commit it. Probably after updating composer.json to 6.3.1, then this patch will be much slimmer.