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.

Any help would be appreciated.

Answer 1

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

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 anyone looking at this question in 2018, I'm using Version 6.4.0 and this works:

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

I added that to the reveal div like this and it's working (as of July 2018):

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

Answer 4

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 5

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 6

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 7

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