我有按钮的模态(保存)
<button type="button" class="btn btn-success btn-sm" data-dismiss="modal" onclick="do_save()">Save
</button>
do_save()
函数失败时如何防止关闭? (例如,当某些数据无法验证时)
答案 0 :(得分:25)
不要使用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;
}
答案 1 :(得分:6)
由于您仍在使用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>
作为替代方案,您可以通过拦截“隐藏”来阻止关闭。事件并从中返回false。
答案 2 :(得分: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传播,并且可以被听到&#34;通过各种事件监听器,其中一个是隐藏模态的事件监听器。为此,需要第二个功能,它可以阻止事件通过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浏览器进行测试
答案 3 :(得分:2)
如果您使用的是引导程序4,则称为“静态背景”,可以通过添加data-backdrop="static"
属性来实现
<div class="modal fade" id="modalExample" data-backdrop="static">