基础模态closeOnClick closeOnEsc不起作用

Question

我正在使用vue和Foundation 6.2.3创建模式：

<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;'">

当我单击按钮时，模态会出现，但是尽管设置了closeOnClick:false和closeOnEsc:false，我仍可以在模态主体外部单击并按Escape键来关闭模态。

这是一个转折点：我正在对webpack使用热重装，并且我可以做一些奇怪的事情来使其开始工作。

1. 我从div中删除了v-foundation-element
2. 我保存并重新加载页面。
3. 我将v-foundation-element添加回div
4. 页面被重新加载
5. 我无法再点击/退出模式

这是模式在工作状态时的呈现HTML：

<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;">

这是处于非工作状态的模态：

<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">

我不确定为什么会这样。我如何使其始终如一地工作？

Answer 1

我认为您可能正在尝试在data属性中使用JSON选项，据我所知，这是不可能的。

尝试设置data-close-on-esc="false"和data-close-on-click= "false"。也许您拥有的插件在数据选项中允许使用JS选项，但我对此表示怀疑。