仅当表单未进行任何更改时，单击模态外部时关闭模态

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