如何删除特定模态的引导程序模态覆盖。 当模态出现时背景有黑色和一些不透明度 是否有删除该元素的选项...
将
data-backdrop="false"
选项作为属性添加到打开模态的按钮。
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="false">
Launch demo modal
</button>
见模态选项
您还可以设置
.modal-backdrop {
background-color: transparent;
}
在你的 css 和 bootstrap 中点击外部功能仍然有效。
我能够使用以下代码片段通过在触发
shown.bs.modal
事件时重新隐藏模态来隐藏模型覆盖。
<script type="text/javascript">
$('#modal-id').on('shown.bs.modal', function () {
$(".modal-backdrop.in").hide();
})
</script>
如果您从 javascript 触发模态,您也可以这样做,将 data-backdrop="false" 直接添加到模态中示例如下:
<div class="modal fade" id="notifyModal" data-backdrop="false"
tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" id="info_content">
A Project has been deleted successfully!
</div>
</div>
</div>
如果您正在通过 jquery 处理引导模式,那么最好在事件回调函数中使用以下代码。
$('.modal-backdrop').remove();
如果您在 javascript (jquery) 中使用函数
click
。你使用:
$("#myBtn2").click(function(){
$("#myModal2").modal({backdrop: false});
});
背景由以下类别触发:
.modal-backdrop
带有额外的 .in
不透明度类别。
默认值(根据需要编辑):
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
.modal-backdrop.in {
filter: alpha(opacity=50);
opacity: .5;
}
$("#myModal").on('hide.bs.modal', function(){
$('.modal-backdrop').remove()
});
这应该是一种魅力
这对我有用。你可以试试这个。
$('.close').click();
$(document.body).removeClass("modal-open");
$("modal-backdrop").remove();
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").removeClass("modal-backdrop");
});
});
</script>
您可以使用
backdropClass
,一个自定义类附加到模态背景(api)。
TS
this.modalService.open(MyModalComponent, {
backdrop: 'static',
keyboard: false,
backdropClass: 'no-backdrop'
});
CSS(全局样式)
.no-backdrop {
background: transparent;
}
我遇到了这个问题,我通过删除带有类模态背景的 div 解决了这个问题。 在ajax成功之后。
$.ajax({
url: 'Your/URL',
type: 'POST',
data: formData, // Instance of FormData()
contentType: false,
processData: false,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function(response) {
$('.modal-backdrop').remove()
// Your code here, what you wanna do after the success of your ajax call
},
error: function() {
console.log('error');
},
complete: function() {
console.log('complete');
}
})
我正在使用:Bootstrap“版本”:“4.0.5”。
我遇到了同样的问题,发现 ii 我只是使用 javascript 来显示和隐藏模态形式,并从调用模态的按钮中删除数据目标属性,一切正常。无需删除数据背景和所有这些东西。