19

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.

alexs333
  • 12,143
  • 11
  • 51
  • 89

7 Answers7

32

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">
Dave Sag
  • 13,266
  • 14
  • 86
  • 134
  • 39
    This doesn't work in the most recent version of Foundation, the option is no longer camel cased so you need to use `data-options="close_on_background_click:false"` – Karl Jun 06 '14 at 10:54
  • 13
    For Foundation 6 you need to camelCase the properties, so it looks like this `data-options="closeOnClick:false;closeOnEsc:false;"` – iopener Feb 05 '16 at 21:02
  • @iopener .. Out of curiosity .. where did you find that info? I looked in their docs http://foundation.zurb.com/sites/docs/reveal.html and I can't see any reference to it. Thanks! – Sorin Trimbitas Mar 28 '16 at 11:32
  • 1
    @SorinTrimbitas Yeah, they haven't filled out the docs yet, but after some searching a comment at the end of this page http://stackoverflow.com/questions/33855505/zurb-foundation-6-reveal-doesnt-work mentioned that these options *don't* work when using the .foundation('open') technique, so I tried them without that technique and they worked fine. – iopener Mar 29 '16 at 03:39
  • For foundation 6 see this: http://foundation.zurb.com/forum/posts/36653#comment_27593 – Nate Flink Aug 15 '16 at 18:04
15

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>
Rav's Patel
  • 743
  • 6
  • 22
8

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">
Brianne Hostutler
  • 123
  • 3
  • 8
3

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;
Chris Peacock
  • 4,107
  • 3
  • 26
  • 24
1

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>
Saran
  • 358
  • 4
  • 9
1

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>
Trent Turner
  • 21
  • 5
0

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;">
NateW
  • 2,101
  • 3
  • 28
  • 37