twitter-bootstrap 防止引导模式关闭点击外部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45516452/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
prevent bootstrap modal close on click outside
提问by Omi
I want to prevent closing bootstrap modal if user clicks outside modal or press ESC. I know this question was asked many times, but they didn't help
如果用户在模态外单击或按 ESC，我想防止关闭引导模态。我知道这个问题被问了很多次，但他们没有帮助
my modal
我的模态
<div class="modal fade modal-popup confirm-uploaded-image-popup" id="uploadedImagePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-popup-content" role="document">
<div class="confirm-uploaded-image-popup-img"></div>
<div class="modal-popup-desc">{!! trans("You have uploaded a picture. Are you sure you want to add it to your gallery?") !!}</div>
<button class="btn btn-very-light-gray confirm-uploaded-image-popup-cancel">{{ trans('Cancel') }}</button>
<button class="btn btn-green confirm-uploaded-image-popup-ok">{{ trans('OK') }}</button>
</div>
</div>
modal appears after file has been uploaded(from form).
文件上传后出现模态（来自表单）。
window.showRegisteruploadConfirmPopup = function(regupload, okCallback, cancelCallback){
var $popup = $('#uploadedImagePopup');
var $popupImg = $popup.find('.confirm-uploaded-image-popup-img');
var $okBtn = $popup.find('.confirm-uploaded-image-popup-ok');
var $cancelBtn = $popup.find('.confirm-uploaded-image-popup-cancel');
//use a boolean flag to avoid successive popups calling previous popup's callbacks
//this variable is separate for each popup
$popupImg.css('background-image', 'url(' + regupload['path'] + ')');
window.lastReguploadId = regupload['id'];
//these handlers are attached to the same element, so prevent multiple handlers from multiple uploads
$okBtn.on('click', function(){
//only execute callback if it's still the same element, not overriden by a new upload
if(window.lastReguploadId == regupload['id']){
okCallback.call(window);
$popup.hide();
}
});
$cancelBtn.on('click', function(){
//only execute callback if it's still the same element, not overriden by a new upload
if(window.lastReguploadId == regupload['id']){
cancelCallback.call(window);
$popup.hide();
}
});
$popup.modal("show");
}
I've already lots of variants, for example $popup.modal('show', {backdrop: 'static', keyboard: false;also setting attributes to modal element <div class="modal fade modal-popup confirm-uploaded-image-popup" data-backdrop="static" data-keyboard="false">but nothing works.
我已经有很多变体，例如$popup.modal('show', {backdrop: 'static', keyboard: false;还将属性设置为模态元素<div class="modal fade modal-popup confirm-uploaded-image-popup" data-backdrop="static" data-keyboard="false">但没有任何效果。
回答by Omi
Use modal js property keyboardtrue or false. In your code there is no class .modal-content.modal-body.
使用模态 js 属性keyboardtrue 或 false。在您的代码中没有 class .modal-content.modal-body。
$(function() {
$('#uploadedImagePopup').modal({
show: true,
keyboard: false,
backdrop: 'static'
});
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="modal fade modal-popup confirm-uploaded-image-popup" id="uploadedImagePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-content modal-dialog modal-popup-content" role="document">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="confirm-uploaded-image-popup-img"></div>
<div class="modal-popup-desc">You have uploaded a picture. Are you sure you want to add it to your gallery?</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-very-light-gray confirm-uploaded-image-popup-cancel">Cancel</button>
<button class="btn btn-green confirm-uploaded-image-popup-ok">OK</button>
</div>
<div>
</div>
</div>
</div>
</div>
</body>
</html>