Question

当我打开Reveal Modal时，我想阻止它在后台点击时关闭（这是默认行为）。

我正在使用Zurb Foundation 5.0.2 。

任何帮助都将不胜感激。

Answer 1

如果您将closeOnBackgroundClick选项设置为false，那么当您在后台点击时，modal将不会关闭。

<div class="reveal-modal" data-options="closeOnBackgroundClick:false">

Answer 2

Yehhhhh终于找到了它：

将以下代码放在您的基础揭示模型上。点击背景或按esc键不会关闭。

数据的选项=＆＃34; close_on_background_click：假; close_on_esc：假;＆＃34;

例如：

<div id="AccessContainer" class="reveal-modal" data-reveal data-options="close_on_background_click:false;close_on_esc:false;">
</div>

Answer 3

您可以通过在显示任何模态之前执行以下JavaScript行来全局实现此目的：

Foundation.libs.reveal.settings.close_on_background_click = false;

Answer 4

对于任何在2018年看这个问题的人，我正在使用6.4.0版，并且可以使用：

data-close-on-click="false" data-close-on-esc="false"

我将其添加到显示div这样，并且正在运行（截至2018年7月）：

<div class="reveal" id="modalVideo" data-reveal data-close-on-click="false" data-close-on-esc="false">

Answer 5

对于zurb的最新版本基础使用以下代码段

<div id="myModal" class="reveal-modal"  data-options="close_on_background_click:false" data-reveal>

完整代码看起来像

＆＃13;

<a href="#" data-reveal-id="myModal" id="dd">Click Me For A Modal</a>
<div id="myModal" class="reveal-modal"  data-options="close_on_background_click:false" data-reveal>
    <h2>Awesome. I have it.</h2>
<p class="lead">Your couch.  It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal">&#215;</a>
</div>

＆＃13;

Answer 6

如果在此处使用独立的Reveal插件：https://zurb.com/playground/reveal-modal-plugin

在打开模式的链接上使用以下内容。

<a href="#" data-reveal-id="myModal" data-closeonbackgroundclick="false">Open Modal</a>

Answer 7

此答案适用于Foundation 6。以下是阻止关闭后台点击（closeOnClick:false;）和阻止通过Esc键（closeOnEsc:false;）关闭的正确选项。

<div class="reveal" id="exampleModal1" data-reveal
    data-options="closeOnClick:false; closeOnEsc:false;">

Zurb Foundation揭示模态 - 防止背景点击关闭

7 个答案: