Question

在twitter bootstrap中创建模态时，有没有办法改变背景颜色？完全删除阴影？

注意：要删除着色，此不会工作，因为它还会更改点击行为。（我仍然希望能够在模态外单击以关闭它。）

$("#myModal").modal({
  backdrop: false
});

Answer 1

通过以下方式更改颜色：

CSS

在引导样式之后将这些样式放在样式表中：

.modal-backdrop {
   background-color: red;
}

少

将bootstrap-variables更改为：

@modal-backdrop-bg:           red;

Source

萨斯

将bootstrap-variables更改为：

$modal-backdrop-bg:           red;

Source

自举-定制

将@modal-backdrop-bg更改为您想要的颜色：

getbootstrap.com/customize/

您也可以通过Javascript删除背景或将颜色设置为transparent。

Answer 2

如果要更改特定模式的背景幕背景颜色，可以通过以下方式访问背景幕元素：

$('#myModal').data('bs.modal').$backdrop

然后你可以通过.css jquery函数更改任何css属性。特别是，背景：

$('#myModal').data('bs.modal').$backdrop.css('background-color','orange')

请注意，必须初始化$（'＃myModal'），否则$ backdrop将为null。同样适用于bs.modal数据元素。

Answer 3

<强> CSS

如果这不起作用：

.modal-backdrop {
   background-color: red;
}

试试这个：

.modal { 
   background-color: red !important; 
}

Answer 4

删除bootstrap模态背景试试这个

.modal-backdrop {
   background: none;
}

Answer 5

如果要将背景添加到特定模态，会变得有点复杂。解决这个问题的一种方法是添加和调用类似函数的函数，而不是直接显示模态：

function showModal(selector) {
    $(selector).modal('show');
    $('.modal-backdrop').addClass('background-backdrop');
}

然后可以将任何css应用于background-backdrop类。

Answer 6

添加以下CSS;

.modal .modal-dialog .modal-content{  background-color: #d4c484; }

<div class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
...

Answer 7

如果只需要删除一种模态窗口的阴影，只需在模态窗口中添加ID

<div class="modal fade" id="myModal">...</div>

并在你的css文件中添加以下内容

#myModal .modal-backdrop {background-color: transparent;}

如果您需要删除所有模态窗口的阴影，只需跳过分配ID的步骤。

Answer 8

对于Bootstrap 4，您可能必须使用.modal-backdrop.show并在!important和background-color上都使用opacity标志。

例如

.modal-backdrop.show {
   background-color: #f00;
   opacity: 0.75;
}

Answer 9

我花了几个小时试图弄清楚如何从已启动的模式中删除背景，到目前为止已经尝试了

.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

Answer 10

对于Angular（7+）项目：

::ng-deep .modal-backdrop.show {
    opacity: 0.7 !important;
}

否则，您可以使用：

.modal-backdrop.show {
    opacity: 0.7 !important;
}

Answer 11

模态出现时，它将在出现之前触发事件show.bs.modal。我在Safari 13.1.2的{{1}}上尝试过。触发MacOS 10.15.6事件时，show.bs.modal尚未插入.modal-backgrop。

所以，我动态放弃body，而addClass则放弃removeClass。

在Internet上浏览了很多文章之后，我发现了a code snippet。当.modal-backdrop和addClass事件触发时，removeClass和body到.modal-backdrop的父节点show.bs.modal。

ps：我使用Bootstrap 4.5。

CSS

hide.bs.modal

Javascript

// In order to addClass/removeClass on the `body`. The parent of `.modal-backdrop`
.no-modal-bg .modal-backdrop {
    background: none;
}

更改twitter bootstrap模式中的背景颜色？

11 个答案:

CSS

少

萨斯

自举-定制

CSS

Javascript

参考文献