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

Я делаю веб-сайт bootstrap с парой загрузочных "Модалов". Я пытаюсь настроить некоторые функции по умолчанию.

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

Bootstrap модальные страницы

12 ответов


в разделе "Параметры" на странице, которую вы связали, вы можете увидеть . Передача этой опции со значением '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>`

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

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

посмотреть этот ответ тоже: запретить twitter bootstrap модальное окно от закрытия


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

вы можете определить свое модальное поведение, определяя data-keyboard и data-backdrop.

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

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

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

можно использовать

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

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


Оформить Этот ::

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

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

  1. использование javascript

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

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

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

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

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

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

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

<div id="myModal">

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

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

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

фон: отключен щелчок вне события

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


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

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