如何防止Bootstrap模态框在使用onclick按钮时关闭？

Question

我有一个带有按钮（保存）的模态框。

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

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

- Kokizzu

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

- Bass Jobsen

---

{return false;} 对于防止关闭模态框非常重要。 - keivan kashani

Answer 2

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

     $('#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浏览器上进行了测试。

- Andrea

Answer 3

既然您已经在使用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来避免关闭。

- vogomatix

Answer 4

如果您正在使用bootstrap 4，则称为"静态背景"，可以通过添加data-backdrop="static"属性来实现。 <div class="modal fade" id="modalExample" data-backdrop="static"> 来源：Bootstrap 4模态框-静态背景

- Tyson Gibby