Отключить клик за пределами модальной области начальной загрузки, чтобы закрыть модальную

315

Я делаю сайт начальной загрузки с несколькими модулями Bootstrap. Я пытаюсь настроить некоторые функции по умолчанию.

Проблема в этом; Вы можете закрыть модальный, щелкнув по фону. Есть ли способ отключить эту функцию? Только для определенных модалов?

Страница загрузки Bootstrap

Теги:
modal-dialog

13 ответов

659
Лучший ответ

В главе "Опции" на странице, которую вы связали, вы можете увидеть опцию backdrop. Передача этой опции со значением 'static' предотвратит закрытие модального файла.
Поскольку @PedroVagner указал на комментарии, вы также можете пройти {keyboard: false}, чтобы предотвратить закрытие модальности, нажав Esc.

Если вы открываете модальный с помощью js, используйте:

$('#myModal').modal({backdrop: 'static', keyboard: false})  

Если вы используете атрибуты данных, используйте:

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>`
  • 10
    В этом решении отсутствует add {keyboard: false} для предотвращения закрытия ESC button .
  • 4
    @PedroVagner Это не то, о чем просит OP, но я отредактирую свой ответ, чтобы добавить это позже
Показать ещё 6 комментариев
90

Вы можете использовать такой атрибут: data-backdrop="static" или с javascript:

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false  // to prevent closing with Esc button (if you want this too)
})

См. также этот ответ: Запретить закрытие модального окна twitter bootstrap

77

Это самый простой

Вы можете определить свое модальное поведение, определяя клавиатуру данных и базу данных.

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
  • 2
    Это единственное, что сработало для меня. По какой-то причине передача параметров в JS напрямую не работала для меня (версия 3.3.7). Если кто-нибудь подтвердит, я могу открыть вопрос с командой Bootstrap.
  • 0
    Сначала использование js-версии не работало для меня, потому что я настраивал все после того, как открыл модал. Вы должны сделать это "$ ('# modalForm'). Modal ({фон: 'статический', клавиатура: ложь});" перед этим "$ ('# modalForm'). modal ('show');". Но для меня лучший ответ от @ ಅನಿಲ್
30

В моем приложении я использую следующий фрагмент кода, чтобы показать Bootstrap modal через jQuery.

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                }); 
22

Вы можете использовать

$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.keyboard =  false;

чтобы изменить поведение по умолчанию.

  • 0
    Отличный ответ, так как он справляется с ситуацией для всех модалов.
6

Существует два способа отключить клик за пределами области загрузки bootstrap, чтобы закрыть модальный -

  • с помощью javascript

    $('#myModal').modal({
       backdrop: 'static',
       keyboard: false
    });
    
  • с использованием атрибута данных в теге HTML

    data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.
    
6

Checkout This::

$(document).ready(function() {
    $("#popup").modal({
        show: false,
        backdrop: 'static'
    });
    
    $("#click-me").click(function() {
       $("#popup").modal("show");             
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
        </head>
    <body>
        <div class="modal" id="popup" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Standard Selectpickers</h3>
            </div>
            <div class="modal-body">
                
                <select class="selectpicker" data-container="body">
                    <option>Mustard</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                </select>

            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <a id="click-me" class="btn btn-primary">Click Me</a> 
    </body>
        <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
</html>
1

Решение, которое работает для меня, следующее:

$('#myModal').modal({backdrop: 'static', keyboard: false})  

backdrop: отключено внешнее событие click

keyboard: отключено событие ключевого слова scape

1

Другой вариант, если вы не знаете, был ли модаль уже открыт или еще нет, и вам нужно настроить модальные параметры:

var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal

if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
    $modal.modal({
        keyboard: keyboard,
        backdrop: backdrop
    });
} else { // Modal has already been opened
    $modal.data('bs.modal').options.keyboard = keyboard;
    $modal.data('bs.modal').options.backdrop = backdrop;

    if(keyboard === false) { 
        $modal.off('keydown.dismiss.bs.modal'); // Disable ESC
    } else { // 
        $modal.data('bs.modal').escape(); // Resets ESC
    }
}
0

Для меня возникла путаница между модальным модулем bootstrap и jQuery. Это сделало трюк (для модального jQuery)

 $("#sticky").modal({
  escapeClose: false,
  clickClose: false,
  showClose: false
});
-1

TL;DR

backdrop: 'static'

https://getbootstrap.com/docs/3.3/javascript/#modals-options

укажите static фон, который не закрывает модальное окно при нажатии.

-1

Вы также можете сделать это, не используя JQuery, например:

<div id="myModal">

var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;
-2

Добавьте ниже css, как вы хотите ширину экрана.

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню