如何使用 onclick 防止引导模式从按钮关闭？答案

【问题标题】：How to prevent bootstrap modal from closing from button using onclick?如何使用 onclick 防止引导模式从按钮关闭？
【发布时间】：2013-10-05 01:52:02
【问题描述】：

我有带按钮的模态（保存）

<button type="button" class="btn btn-success btn-sm" data-dismiss="modal" onclick="do_save()">Save
    </button>

do_save() 函数失败时如何防止关闭？（例如当某些数据无法验证时）

【问题讨论】：

标签： javascript twitter-bootstrap modal-dialog twitter-bootstrap-3

【解决方案1】：

不要使用data-dismiss="modal" 并让您的函数关闭（隐藏）您的模态：

<button type="button" class="btn btn-success btn-sm" onclick="do_save()">Save</button>

function do_save()
    {
        if(Math.floor(Math.random() * 2)==1)
        {
            console.log('success');
            $('#myModal').modal('hide');
            return;
        }   
        console.log('failure');
        return false;
    }

【讨论】：

{return false;} 对于防止关闭模态很重要

【解决方案2】：

既然你一直在使用 jQuery，尽量不要在你的代码中嵌入 JavaScript/jQuery。

$('#buttonId').on( 'click', function () {
   // either call do_save or embed the contents of do_save in here
   var myDataIsValid = true; // change to call validator function
   if (myDataIsValid) {
     $('#myModal').modal('hide');
   }
   return true; // value depends on whether you want stopPropagation or not.
});

HTML：

<button id="buttonId" type="button" class="btn btn-success btn-sm">Save</button>

作为替代方案，您可以通过拦截 'hide' 事件并从中返回 false 来阻止关闭。

【讨论】：

【解决方案3】：

如果您像这样从按钮中捕获点击事件：

     $('#buttonId').off('click').click(function(clickEvent){
        //enter code here
     });

您实际上可以防止关闭您的模式。为此，根据您的情况，您会发现这两个功能很有用：

     clickEvent.preventDefault();
     clickEvent.stopPropagation();

如果我理解这个网站（德语） http://www.mediaevent.de/javascript/event-handler-default-verhindern.html 正确地， preventDefault() 停止立即的默认操作（例如跟随链接）。但是，事件本身仍将通过 DOM 传播，并且可以被各种事件侦听器“听到”，其中之一就是隐藏模式的事件侦听器。为此，需要第二个函数，它会停止事件在 DOM 中的传播。因此，隐藏的侦听器听不到它，并且窗口不会关闭（隐藏）。因此，我建议实现这样的功能：

     $('#buttonId').off('click').click(function(clickEvent){
        //enter code here
      var myDataIsValid = true;
      // check if Data is valid => myDataIsValid = true or false
      if(myDataIsValid){
       //do Stuff
      }else{
       clickEvent.preventDefault();
       clickEvent.stopPropagation();
       //do other Stuff
      }
    });

在我的代码中，我只需要使用stopPropagation()，因为我想要默认的动作，所以你可以独立使用这两个函数。

注意：此解决方案仅在 Firefox 浏览器中进行了测试

【讨论】：

【解决方案4】：

如果您使用的是 bootstrap 4，这称为“静态背景”，可以通过添加 data-backdrop="static" 属性来实现

<div class="modal fade" id="modalExample" data-backdrop="static">

源代码：Bootstrap 4 Modal - Static backdrop

【讨论】：