twitter-bootstrap 如何使用onclick防止引导模式从按钮关闭？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19073238/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent bootstrap modal from closing from button using onclick?
提问by Kokizzu
i have modal with button (Save)
我有带按钮的模式（保存）
<button type="button" class="btn btn-success btn-sm" data-dismiss="modal" onclick="do_save()">Save
</button>
how to prevent closing when do_save()function failed? (for example when some data fails to validate)
do_save()功能失败时如何防止关闭？（例如当某些数据无法验证时）
回答by Bass Jobsen
Don't use the data-dismiss="modal"and let your function close (hide) your modal:
不要使用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;
}
回答by vogomatix
Since you are using jQuery anyway, try not to have JavaScript/jQuery embedded in your code.
由于您无论如何都在使用 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:
HTML：
<button id="buttonId" type="button" class="btn btn-success btn-sm">Save</button>
As an alternative, you can probably prevent closing by intercepting the 'hide' event and returning false from that.
作为替代方案，您可以通过拦截 'hide' 事件并从中返回 false 来防止关闭。
回答by Andrea
If you catch the click-event from the button like this:
如果您像这样从按钮捕获点击事件：
$('#buttonId').off('click').click(function(clickEvent){
//enter code here
});
you actually can prevent the closing of your modal. For this, depending on your situation, you will find these two functions useful:
您实际上可以防止关闭模态。为此，根据您的情况，您会发现这两个函数很有用：
clickEvent.preventDefault();
clickEvent.stopPropagation();
If I understood this site (which is in German) http://www.mediaevent.de/javascript/event-handler-default-verhindern.htmlcorrectly, preventDefault() stops the immediate default action (such as following a link). However, the event itself will still travel through the DOM and can be "heard" by various event listeners, one of these is the event listener that hides the modal. For this the second function is needed, which stops the event's travel through the DOM. Thus, it can't be heard by the hiding listener and the window won't be closed (hidden). Therefore, I suggest to implement the functions like so:
如果我正确理解了该站点（德语版） 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
}
});
In my code, I only need to use stopPropagation(), as my default action is wanted, so you can use the two functions independently.
在我的代码中，我只需要使用 stopPropagation()，因为我需要默认操作，因此您可以独立使用这两个函数。
note: This solution only was tested with a Firefox browser
注意：此解决方案仅使用 Firefox 浏览器进行了测试
回答by Tyson Gibby
If you are using bootstrap 4 this is called a "static backdrop" and can be achieved by adding the data-backdrop="static"attribute
如果您使用的是引导程序 4，这称为“静态背景”，可以通过添加data-backdrop="static"属性来实现
<div class="modal fade" id="modalExample" data-backdrop="static">
<div class="modal fade" id="modalExample" data-backdrop="static">
