只有在表单中没有进行任何更改时，才关闭模态外部的模态

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