我有一个带有按钮(保存)的模态框。
<button type="button" class="btn btn-success btn-sm" data-dismiss="modal" onclick="do_save()">Save
</button>
当do_save()
函数失败时如何防止关闭?(例如,当某些数据未能验证时)
我有一个带有按钮(保存)的模态框。
<button type="button" class="btn btn-success btn-sm" data-dismiss="modal" onclick="do_save()">Save
</button>
当do_save()
函数失败时如何防止关闭?(例如,当某些数据未能验证时)
不要使用 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;
}
$('#buttonId').off('click').click(function(clickEvent){
//enter code here
});
您实际上可以防止模态框关闭。为此,根据您的情况,您会发现这两个函数很有用:
clickEvent.preventDefault();
clickEvent.stopPropagation();
$('#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浏览器上进行了测试。
既然您已经在使用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>
data-backdrop="static"
属性来实现。
<div class="modal fade" id="modalExample" data-backdrop="static">
来源:Bootstrap 4模态框-静态背景