Zurb Foundation Reveal Modal - preventing close on background click

Question

When I am opening my Reveal Modal, I would like to prevent it from closing on background click (which is a default behavior).

I am using Zurb Foundation 5.0.2

Answer 1

You can achieve this globally by executing the following line of JavaScript before showing any modals:

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

Answer 2

Yehhhhh Finally Found It:

Put below code on your foundation reveal model. Than it not close by clicking on background or by pressing esc key.

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

Ex:

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

Answer 3

For latest version of foundation by zurb use following snippet

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

Complete Code will look like

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

Answer 4

This answer applies to Foundation 6. Below are the correct option for both preventing close on background click (closeOnClick:false;) and preventing close via the Esc key (closeOnEsc:false;).

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

Answer 5

If using the stand-alone Reveal plugin here: https://zurb.com/playground/reveal-modal-plugin

Use the following on the link that opens the modal.

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

Answer 6

If you set the closeOnBackgroundClick option to false then your modal won't close when you click in the background.

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