1

I'm using vue and foundation 6.2.3 to create a modal:

<div :id="modalId" class="reveal" data-reveal v-foundation-element aria-labelledby="modal button" aria-hidden="true"
     role="dialog" :data-options="allowEscape ? 'closeOnClick:true;closeOnEsc:true;' : 'closeOnClick:false;closeOnEsc:false;'">

When I click the button the modal shows up, but I can click outside the modal body and press escape to close the modal despite closeOnClick:false and closeOnEsc:false being set.

Here's the twist: I'm using hot reload with webpack and I can do a weird thing to make it start working.

  1. I remove v-foundation-element from the div
  2. I save and reload the page.
  3. I add v-foundation-element back to the div
  4. the page gets hot reloaded
  5. I can no longer click/esc out of the modal

here's the rendered HTML for the modal when it's in the working state:

<div id="choose-your-package" data-reveal="ianmsm-reveal" aria-labelledby="Choose Your Package" aria-hidden="false" role="dialog" data-options="closeOnClick:false;closeOnEsc:false;" class="reveal" data-yeti-box="choose-your-package" data-resize="choose-your-package" tabindex="-1" style="display: block; top: 129px;">

and here's the modal in the non-working state:

<div id="choose-your-package" data-reveal="axb8cp-reveal" aria-labelledby="Choose Your Package" aria-hidden="false" role="dialog" data-options="closeOnClick:false;closeOnEsc:false;" class="reveal" data-yeti-box="choose-your-package" data-resize="choose-your-package" data-events="resize" style="top: 129px; display: block;" tabindex="-1">

I'm not sure why this is happening. How do I make it work consistently?

Derek Chadwell
  • 696
  • 1
  • 8
  • 22

1 Answers1

0

I think maybe you are trying to use the JSON options in the data attribute, which, as far as I know isn’t possible.

Try setting data-close-on-esc="false" and data-close-on-click= "false". Maybe the plugin you have has the JS options allowed in data options, but I doubt it.

Noah
  • 550
  • 2
  • 8
  • https://stackoverflow.com/questions/21922511/zurb-foundation-reveal-modal-preventing-close-on-background-click This link shows that those settings should work fine in foundation 6 – Derek Chadwell Mar 01 '19 at 20:43