verhindern Bootstrap modal schließen auf Klick außerhalb

Ich möchte Bootstrap modal schließen verhindern, wenn der Benutzer außerhalb Modal klickt oder drücken Sie ESC. Ich weiß, diese Frage wurde oft gefragt, aber sie hat nicht geholfenverhindern Bootstrap modal schließen auf Klick außerhalb

mein 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 erscheint nach Datei (von Form) hochgeladen wurde.

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

}

Ich habe schon viele Varianten, zum Beispiel $popup.modal('show', {backdrop: 'static', keyboard: false; auch Einstellung Attribute modal Element <div class="modal fade modal-popup confirm-uploaded-image-popup" data-backdrop="static" data-keyboard="false"> aber nichts funktioniert.

Quelle

2017-08-04 Anonymous

Verwenden Sie die modale js-Eigenschaft keyboard wahr oder falsch. In Ihrem Code gibt es keine Klasse .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>

Quelle

2017-08-04 22:52:23 Omi

mein Tag dank gespeichert. –

verhindern Bootstrap modal schließen auf Klick außerhalb

Antwort

Verwandte Themen