web-dev-qa-db-ja.com

Zurb Foundation RevealModal-バックグラウンドクリックで閉じるのを防ぐ

Reveal Modal を開いているときに、バックグラウンドクリックで閉じないようにします（これはデフォルトの動作です）。

Zurb Foundation5.0.2を使用しています。

どんな助けでもいただければ幸いです。

javascriptzurb-foundation
18
alexs333

closeOnBackgroundClickオプションをfalseに設定した場合、バックグラウンドをクリックしてもmodalは閉じません。

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

Yehhhhhついにそれを見つけました：

以下のコードを基礎の公開モデルに配置します。背景をクリックするか、escキーを押して閉じないより。

data-options = "close_on_background_click：false; close_on_esc：false;"

例：

<div id="AccessContainer" class="reveal-modal" data-reveal data-options="close_on_background_click:false;close_on_esc:false;">
</div>
14
Rav's Patel

2018年にこの質問を見ている人のために、私はバージョン6.4.0を使用しており、これは機能します。

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

私はそれをこのようにrevealdivに追加し、それは機能しています（2018年7月現在）：

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

モーダルを表示する前にJavaScriptの次の行を実行することで、これをグローバルに実現できます。

Foundation.libs.reveal.settings.close_on_background_click = false;
3
Chris Peacock

Zurbによる最新バージョンのFoundationについては、次のスニペットを使用してください

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

完全なコードは次のようになります

<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>
1
Saran

ここでスタンドアロンのRevealプラグインを使用する場合： https://zurb.com/playground/reveal-modal-plugin

モーダルを開くリンクで以下を使用します。

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

この回答はFoundation 6に適用されます。以下は、バックグラウンドクリックでのクローズ（closeOnClick:false;）の防止と、Escキー（closeOnEsc:false;）によるクローズの防止の両方の正しいオプションです。

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