I've tryied following https://www.drupal.org/node/2052525 for foundation 7.x-5.0-alpha8 with no success.
The div's were actually created:

<a href="javascript:" id="zf-reveal-link-1" class="zurb-foundation-reveal" data-reveal-id="zf-reveal-1">Click me!</a>

and on the buttom of the page:

<div id="zf-reveal-1" class="expand reveal-modal">Hello from Zurb Foundation reveal!<a class="close-reveal-modal">×</a></div>

But the link dos'nt seemed to respond to click events.

Any suggestions?

CommentFileSizeAuthor
#6 zurb_foundation-reveal-functionality-6.patch888 bytesFiLeVeR10

Comments

yaelsho’s picture

yaelsho commented
Issue summary: View changes
nickbumgarner’s picture

nickbumgarner commented

What are you trying to accomplish, having the Drupal messages display as reveal modals?

kevinquillen’s picture

kevinquillen commented

Try adding the attribute 'data-reveal' to the div that is displaying the modal.

See the 'Basic' example here: http://foundation.zurb.com/docs/components/reveal.html

FiLeVeR10’s picture

FiLeVeR10 commented

@yaelsho does #3 solve your issue?

shauntyndall’s picture

shauntyndall commented
Version: 7.x-5.0-alpha8 » 7.x-5.x-dev
Component: Miscellaneous » Code
Category: Support request » Bug report
Priority: Major » Normal
Status: Active » Needs work

I'm gambling that theme_zurb_foundation_reveal() doesn't implement the "data-reveal" attribute (per the instructions referenced https://www.drupal.org/node/2052525). @filever10 can you attempt to replicate?

FiLeVeR10’s picture

FiLeVeR10 commented
StatusFileSize
new zurb_foundation-reveal-functionality-6.patch888 bytes

So I've tried out the process and can verify that adding data-reveal to the reveal container does in fact make the reveal work.

Also noticed that the href on the resulting link was "javascript:", so I also reset that to follow the foundation example of "#".

*One thing to note, when I enabled the subtheme on the latest 7.x-5.x it threw an error that prevented foundation from loading at the bottom of the page. I disabled libs.js in the subtheme and the error went away and the reveal works as it did on the base theme with the above changes.

yaelsho’s picture

yaelsho commented

#6 is working great (manually patched 7.x-5.0-alpha8 ver).
Thanks!

FiLeVeR10’s picture

FiLeVeR10 commented
Status: Needs work » Needs review

@yaelsho you're welcome, I'm glad it's working for you! Hopefully it will get added in once it's reviewed.

yaelsho’s picture

yaelsho commented

Another issue related to Foundation 5 reveal:

When adding AJAX reveal modal, it work post the change in #6.
But post closing the AJAX reveal modal, and trying to open it again by clicking the same link, the reveal doesn't work as expected: The reveal-modal-bg doesn't toggle, and the modal opened in a shifted way (to high). The same issue appears if there are 2 different AJAX reveal modals in the same page, the first one will work great, when closing it, the 2nd modal will be opened in the same shifted way.

It seemed to me like some issue of initialization that need to be done/prevent while loading the ajax modal.
I tried to look into it, but didn't find a resolution.

Are you familiar with this issue?

I can open a different issue if you prefer to separate them.

kevinquillen’s picture

kevinquillen commented

There are known issues with the Reveal plugin itself in some more 'advanced' usages. I think I understand what you are describing as I have seen the same behavior. There are some issues with DOM state/refresh and binding in some cases.

https://github.com/zurb/foundation/issues?q=is%3Aissue+is%3Aopen+reveal

I do know that Foundation 5.5 released with a particularly nasty showstopper bug for reveal (related to positioning) - they may have resolved this by now.

yaelsho’s picture

yaelsho commented

To prevent the issue from #9, I've created a copy of html.tpl.php for the requested ajax node (html--node--id.tpl.php), and delete the following lines from the tpl copy:

  <script>
    (function ($, Drupal, window, document, undefined) {
      $(document).foundation();
    })(jQuery, Drupal, this, this.document);
  </script>

This prevent from foundation to initialized twice.
Got the idea from: https://github.com/zurb/foundation/issues/2928.

  • shauntyndall committed 1ce34a4 on 7.x-5.x authored by FiLeVeR10 
    Issue #2405509 by FiLeVeR10: reveal functionality doesn't seems to work...
shauntyndall’s picture

shauntyndall commented
Status: Needs review » Fixed

Patch #6 has been tested & committed to the dev branch. Thanks @filever10! The other issue you noticed is also corrected. The libs.min.js need to be recompiled in the STARTER theme.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.