在twitter bootstrap中创建模态时,有没有办法改变背景颜色?完全删除阴影?
注意:要删除着色,这不起作用,因为它还会更改单击行为。 (我仍然希望能够在模态外单击以关闭它。)
$("#myModal").modal({
backdrop: false
});
通过以下方式更改颜色:
在引导样式之后将这些样式放在样式表中:
.modal-backdrop {
background-color: red;
}
将bootstrap-variables更改为:
@modal-backdrop-bg: red;
将bootstrap-variables更改为:
$modal-backdrop-bg: red;
将@modal-backdrop-bg
更改为您想要的颜色:
您也可以通过Javascript删除背景或将颜色设置为transparent
。
如果要更改特定模式的背景幕背景颜色,可以通过以下方式访问背景幕元素:
$('#myModal').data('bs.modal').$backdrop
然后你可以通过.css jquery函数更改任何css属性。特别是有背景:
$('#myModal').data('bs.modal').$backdrop.css('background-color','orange')
请注意,必须初始化$('#myModal'),否则$ backdrop将为null。同样适用于bs.modal数据元素。
CSS
如果这不起作用:
.modal-backdrop {
background-color: red;
}
试试这个:
.modal {
background-color: red !important;
}
删除bootstrap模态背景尝试这一个
.modal-backdrop {
background: none;
}
如果要将背景添加到特定模态,它会变得更复杂一些。解决这个问题的一种方法是添加和调用类似函数的函数,而不是直接显示模态:
function showModal(selector) {
$(selector).modal('show');
$('.modal-backdrop').addClass('background-backdrop');
}
然后可以将任何css应用于background-backdrop
类。
添加以下CSS;
.modal .modal-dialog .modal-content{ background-color: #d4c484; }
<div class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
...
如果只需要删除一种类型的模态窗口的阴影,只需将ID添加到模态窗口即可
<div class="modal fade" id="myModal">...</div>
并在你的css文件中添加以下内容
#myModal .modal-backdrop {background-color: transparent;}
如果需要删除所有模态窗口的着色,只需跳过分配ID的步骤即可。
对于Bootstrap 4,您可能必须使用.modal-backdrop.show
并在!important
和background-color
上玩opacity
旗帜。
EG
.modal-backdrop.show {
background-color: #f00;
opacity: 0.75;
}
我用了几个小时试图找出如何从启动的模态中删除背景,到目前为止尝试过
.modal-backdrop { background: none; }
甚至我没有尝试使用javascript之类的工作
<script type="text/javascript">
$('#modal-id').on('shown.bs.modal', function () {
$(".modal-backdrop.in").hide(); })
</script>
也没有工作。我刚才补充道
data-backdrop="false"
至
<div class="modal fade" id="myModal" data-backdrop="false">......</div>
并应用css CLASS
.modal { background-color: transparent !important; }
现在它的工作就像一个魅力这适用于Bootstrap 3