クリック時にブートストラップモーダルクローズを防ぐ

ユーザーがモーダル外をクリックするかESCを押すと、ブートストラップモーダルを閉じないようにしたい。私はこの質問は何度も頼まれた知っているが、彼らは、ファイルが（フォームから）アップロードされた後クリック時にブートストラップモーダルクローズを防ぐ

私のモーダル

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

モーダルが表示されます助けにはなりませんでした。私はすでにバリアントをたくさんしました

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"); 

}

は、たとえば$popup.modal('show', {backdrop: 'static', keyboard: false;のためにも、要素<div class="modal fade modal-popup confirm-uploaded-image-popup" data-backdrop="static" data-keyboard="false">をモーダル属性を設定するが、何も働きません。

出典

2017-08-04 Anonymous

モーダルjsプロパティkeyboardをtrueまたはfalseに設定します。あなたのコードにはクラスがありません.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">&times;</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>

出典

2017-08-04 22:52:23 Omi

私の一日の感謝を救いました。 –

クリック時にブートストラップモーダルクローズを防ぐ

答えて

関連する問題