仅在没有对表单进行更改时单击模态外的关闭模态

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