0

I have a views page which displays rows of teasers. Clicking on the H4 title opens a Foundation reveal modal. Here is the views template:

<li class="m-social-modal__item column column-block">
<div class="m-social-modal__card">
    <div class="m-social-modal--image"><img src="<?php print $fields['field_image']->content; ?>" /></div>
    <div class="m-social-modal__content">
        <h4 data-open="<?php print 'modal' . $fields['nid']->raw; ?>"><?php print $fields['title']->raw; ?></h4>
        <p class="m-social-modal__text"><?php print $fields['body_1']->content; ?></p>
    </div>
</div>
</li>

<div class="reveal" id="<?php print 'modal' . $fields['nid']->raw; ?>" data-reveal>
<div class="m-social-modal--modal-image"><img src="<?php print $fields['field_image']->content; ?>" /></div>
    <h4 class="m-social-modal__title"><?php print $fields['title']->raw; ?></h4>
    <div ><?php print $fields['body']->content; ?></div>
<button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
</button>
</div> 

The title field (Content: Title) is linked to the original piece of content, and is printed $fields['title']->raw instead of $fields['title']->content as I want the Foundation reveal modal to appear, not the page node.

I've added an exposed filter (Content: Has taxonomy term - Select terms from vocabulary Tags) with 'Use AJAX' (found under 'Other' in the Page Display details of the view). Once the category has been selected it's autosubmitted and the teasers which have been tagged accordingly are displayed.

All good so far, however, I can no longer open the Foundation reveal modal by clicking on the H4 title link. Is there any way of resolving this?

I'm using views 7.x-3.20

Update Before clicking on the Exposed filter dropdown, the modal opens when you click on the h4 link. It toggles the display from 'none' to 'block':

Before clicking the link:

<div class="reveal-overlay" style="display: none;"><div class="reveal" id="modal10337" data-reveal="" role="dialog" aria-hidden="true" data-yeti-box="modal10337" data-resize="modal10337" data-e="x4w41x-e" tabindex="-1" style="display: none; top: 59px;">

After clicking the link:

<div class="reveal-overlay" style="display: block;"><div class="reveal" id="modal10337" data-reveal="" role="dialog" aria-hidden="false" data-yeti-box="modal10337" data-resize="modal10337" data-e="x4w41x-e" tabindex="-1" style="display: block; top: 59px;">

However after clicking on the Exposed filter dropdown and selecting a category there is no style element:

<div class="reveal-overlay"><div class="reveal" id="modal10337" data-reveal="" role="dialog" aria-hidden="true" data-yeti-box="modal10337" data-resize="modal10337" data-e="3gejw6-e">
  • Any JS console errors? Does activating Ajax change the markup? Adding classes or wrappers? – leymannx Jul 25 at 17:29
  • Hi @leymannx there are no JS console errors. On the page, before clicking on the exposed filter dropdown when I click on the link to open the modal it toggles the display from 'none' to 'block'. – snarf1974 Jul 26 at 8:42
  • @leymannx I've updated the post with the issue. – snarf1974 Jul 26 at 9:14
  • This view is in a customised display, so that could have some bearing on it. I've decided to set Use Ajax to No and Use Panel path to Yes. The modal works now on the exposed filter. – snarf1974 Jul 26 at 12:57
  • It would be great to use AJAX, if there was some way of binding. – snarf1974 Jul 29 at 6:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.