Bootstrap modal: отключить закрытие фонового изображения, не отключая фоновые элементы управления

Как можно предотвратить блокировку модальности при фоновом щелчке и все еще иметь регистр кликов для работы с остальными элементами управления на экране?

Использование статического метода

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

отключает весь фон.

Изменить: Моя конкретная проблема заключается в следующем: у меня разные кнопки на экране, и каждый из них должен показывать всплывающее окно с двойным щелчком. Теперь, когда я открываю всплывающее окно, я также могу открыть другое всплывающее окно, не закрывая первый. Если я сделаю фоном статическим, нажатие других кнопок не работает, и если я не сделаю его статическим, открытие второго закрывает первый. Как включить одновременное открытие нескольких всплывающих окон?

Спасибо!

ОТВЕТЫ

Ответ 1

Добавьте это в таблицу стилей, убедитесь, что она переопределяет модальные значения начальной загрузки.

.modal-backdrop.in {
    opacity: 0 !important;
    z-index: -1050 !important;
}

ИЛИ

.modal-backdrop {
    display: none !important;
}

Рабочий пример

.modal {
    -webkit-transform: translateX(0%) translateY(25%) !important;
    -moz-transform: translateX(0%) translateY(25%) !important;
    -ms-transform: translateX(0%) translateY(25%) !important;
    transform: translateX(0%) translateY(25%) !important;
}
.modal-backdrop {
     display: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'; return false;" />
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-backdrop="static">Open Modal</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal2" data-backdrop="static">Open Modal 2</button>
<label>This is a text and can be selected for copying</label>
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">Modal Header</h4>

            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div id="myModal2" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">This is Modal Header 2</h4>

            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>