僅在沒有對錶單進行更改時單擊模態外的關閉模態

Question

只有在模態中沒有更改的情況下，我才需要關閉模態才能關閉模態。我有點能夠實現它。我已經在點擊模式和模態之外編寫了代碼。但是我只需要在模態外單擊時觸發該功能。

$(".modal").on('click',function() { 
    if(changed_data!= original_data) 
     { 
     var result = confirm("Are you sure ?"); 
     if(result == true){ 
      $('#dialog').data('bs.modal').options.backdrop = true; 
      $('#form').removeData('bs.modal'); 
     }else{ 
      $('#dialog').data('bs.modal').options.backdrop = 'static'; 
     } 
     }else{ 
      $('#dialog').data('bs.modal').options.backdrop = true; 
      $('#form').removeData('bs.modal'); 
      } 
}); 

現在我只需要在點擊模態外部時調用這個函數。我發現了一個選項hide.bs.modal，hidden.bs.modal，但它們不符合我的要求。如果我使用它們，則應用於模態的更改會在再次打開模態時顯示效果。有什麼建議麼？

Answer 1

顯示模式之後加入click事件，鎖定模式，以防止其關閉，使用功能，如果它是確定關閉，然後解鎖並關閉它

$('#myModal').on('shown.bs.modal', function() { 
    $('#myModal').modal('lock'); 
    $('#myModal').on('click', function(e) { 
     //do nothing if you're clicking inside the actual modal  
     if((' ' + e.target.className + ' ').indexOf(' ' + 'modal-dialog' + ' ') > -1 || $(e.target).closest('.modal-dialog').length) 
      return; 

     if(changed_data != original_data) 
     { 
      var result = confirm("Are you sure ?"); 
      if(result == true){ 
       $('#myModal').modal('unlock').modal('hide').off("click"); 
      } 
     }else{ 
      $('#myModal').modal('unlock').modal('hide').off("click"); 
     } 
    }); 
}); 

編輯

哦，只記得我使用lock和unlock，因爲我正在擴展我的基礎模態以獲得這些。允許鎖定和解鎖的工作與你的情態動詞使用內$(document).ready

// save the original function object 
var _superModal = $.fn.modal; 

// add locked as a new option 
$.extend(_superModal.Constructor.DEFAULTS, { 
    locked: false 
}); 

// capture the original hide 
var _hide = _superModal.Constructor.prototype.hide; 

// add the lock, unlock and override the hide of modal 
$.extend(_superModal.Constructor.prototype, { 
    // locks the dialog so that it cannot be hidden 
    lock: function() { 
     this.options.locked = true; 
    } 
    // unlocks the dialog so that it can be hidden by 'esc' or clicking on the backdrop (if not static) 
    ,unlock: function() { 
     this.options.locked = false; 
    } 
    // override the original hide so that the original is only called if the modal is unlocked 
    ,hide: function() { 
     if (this.options.locked) return; 
      _hide.apply(this, arguments); 
    } 
});