javascript - examples - Zurb Foundation Reveal Modal: evitar el cierre al hacer clic en el fondo

foundation zurb com docs

Question

Cuando abro mi Reveal Modal , me gustaría evitar que se cierre con un clic de fondo (que es un comportamiento predeterminado).

Estoy usando la Fundación Zurb 5.0.2 .

Cualquier ayuda sería apreciada.

Answer 1

Esta respuesta se aplica a la Foundation 6 . A continuación se muestra la opción correcta tanto para evitar el cierre en el fondo, haga clic en ( closeOnClick:false; ) y para evitar el cierre con la Esc ( closeOnEsc:false; ).

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

Answer 2

Para cualquiera que vea esta pregunta en 2018, estoy usando la versión 6.4.0 y esto funciona:

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

Agregué eso a la división reveladora como esta y está funcionando (a partir de julio de 2018):

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

Answer 3

Para la última versión de Foundation por zurb use el siguiente fragmento de código

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

El código completo se verá como

<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

Puede lograr esto globalmente ejecutando la siguiente línea de JavaScript antes de mostrar cualquier modal:

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

Answer 5

Si utiliza el complemento Reveal independiente aquí: https://zurb.com/playground/reveal-modal-plugin

Usa lo siguiente en el enlace que abre el modal.

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

Answer 6

Yehhhhh finalmente lo encontró:

Pon debajo el código en tu fundación, modelo de revelación. Que no se cierre haciendo clic en el fondo o presionando la tecla esc.

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 7

Si configura la opción closeOnBackgroundClick en false , su modal no se cerrará cuando haga clic en el fondo.

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