Zurb Foundation Reveal Modal - предотвращение закрытия фонового клика

Когда я открываю свой Reveal Modal, я бы хотел, чтобы он не закрывался на фоновом клике (это поведение по умолчанию).

Я использую Zurb Foundation 5.0.2.

Любая помощь будет оценена.

Ответы

Ответ 1

Если вы установите для параметра closeOnBackgroundClick значение false, то ваш modal не будет закрыт, когда вы нажмете в фоновом режиме.

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

Ответ 2

Yehhhhh Наконец-то нашел:

Поместите ниже код на модель основания. Чем он не близок, щелкнув по фону или нажав клавишу esc.

данные опции-= "close_on_background_click ложь; close_on_esc ложь;"

Пример:

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

Ответ 3

Вы можете достичь этого глобально, выполнив следующую строку JavaScript перед показом любых модалов:

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

Ответ 4

Для последней версии основания по zurb используйте следующий фрагмент

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

Ответ 5

Если вы используете автономный плагин Reveal здесь: https://zurb.com/playground/reveal-modal-plugin

Используйте ссылку на ссылку, которая открывает модальную версию.

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

Ответ 6

Этот ответ относится к Foundation 6. Ниже приведены правильные опции для предотвращения закрытия фонового клика (closeOnClick:false;) и предотвращения закрытия с помощью клавиши Esc (closeOnEsc:false;).

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