verhindern bootstrap modal schließen, klicken Sie auf auf außerhalb

Ich möchte, um das schließen zu verhindern bootstrap-modal, wenn Benutzer klickt außerhalb modal oder drücken Sie die ESC-Taste. Ich weiß, diese Frage wurde viele Male gefragt, aber Sie hat nicht geholfen

meine 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 angezeigt, nachdem die Datei hochgeladen wurde(von der 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");

}

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

InformationsquelleAutor | 2017-08-04
  1. 6

    Verwenden Sie modale js-Eigenschaft keyboard true oder false. In deinem code gibt es keine Klasse .modal-content .modal-body.

    JS:

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

    HTML:

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

    • Meinen Tag gerettet danke.
    InformationsquelleAutor Omi
Schreibe einen Kommentar