在 twitter 引导模式中更改背景颜色？答案

【问题标题】：Change the background color in a twitter bootstrap modal?在 twitter 引导模式中更改背景颜色？
【发布时间】：2012-05-22 01:50:22
【问题描述】：

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

注意：对于移除阴影，这不起作用，因为它也会改变点击行为。（我仍然希望能够在模态框外单击以将其关闭。）

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

【问题讨论】：

请注意，从可用性的角度来看，在没有任何视觉反馈的情况下保留单击以关闭行为（例如完全移除阴影）是一种非常糟糕的体验。没有什么可以向用户表明他们在后台的点击是“安全的”并且不会进入下面的控件。也没有什么可以向用户表明他们可以在后台单击以首先关闭模式。

标签： twitter-bootstrap

【解决方案1】：

通过以下方式更改颜色：

CSS

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

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

少

将引导变量更改为：

@modal-backdrop-bg:           red;

Source

萨斯

将引导变量更改为：

$modal-backdrop-bg:           red;

Source

引导定制器

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

getbootstrap.com/customize/

您还可以通过 Javascript 或将颜色设置为 transparent 来移除背景。

【讨论】：

不，它也应该与 sass 一起使用，或者不使用。请确保将这些行放在 bootstrap.css 之后。你试过了吗？？？
试过了，但第一次犯了错误。谢谢你让我直截了当。
您只需要在您的 css 文件之前包含 bootstrap.css 并覆盖所需的类以按照您想要的方式主题化模式。这就是 css 的全部意义......它的级联。
要找出要修改的引导类，您可以打开 Inspect Element。我是 bootstrap 新手，没有找到很好的资源来了解有关 bootstrap 类的所有详细信息以及它们的使用位置。
我在 modal-content 对象上使用了快速内联样式：style="background-color: transparent; border: 0px;"

【解决方案2】：

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

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

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

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

注意 $('#myModal') 必须被初始化，否则 $backdrop 将会为空。同样适用于 bs.modal 数据元素。

【讨论】：

这非常适合针对特定模式。而且似乎初始化发生得足够快，可以将这一行直接放在$('#myModal').modal(); 之后（如果不是，则必须将其包装在#myModal 的“显示”事件的事件侦听器中）。请注意，您可以使用@Simon-Bengtsson 在他的回答中显示的$('#myModal').data('bs.modal').$backdrop.addClass('myModal-backdrop');，而不是将css 样式直接放在javascript 中。
$backdrop 现在未定义。
也 _backdrop 为空

【解决方案3】：

CSS

如果这不起作用：

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

试试这个：

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

【讨论】：

在我的例子中 !important 解决了这个问题。谢谢。

【解决方案4】：

删除引导模式背景试试这个

.modal-backdrop {
   background: none;
}

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

谢谢：$('.modal-backdrop').css("background-color", "red");

【解决方案6】：

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

例如

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

【讨论】：

【解决方案7】：

添加以下CSS；

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

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

【讨论】：

【解决方案8】：

如果您只需要为一种模式窗口移除阴影，您可以简单地将 ID 添加到您的模式窗口

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

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

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

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

【讨论】：

我先尝试了这个，但它根本不起作用。似乎 bootstrap 将 .modal-backdrop 元素放在 DOM 中一个完全独立的位置，而不是嵌套在 #myModal 元素中。所以 id #myModal 与 .modal-backdrop 无关，CSS 样式被忽略。

【解决方案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 类

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

现在它就像一个魅力这适用于 Bootstrap 3

【讨论】：

【解决方案10】：

对于 Angular(7+) 项目：

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

否则你可以使用：

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

【讨论】：

【解决方案11】：

当modal出现时，会在出现之前触发show.bs.modal事件。我在MacOS 10.15.6 上尝试了Safari 13.1.2。当show.bs.modal事件触发时，.modal-backgrop还没有插入到body中。

所以，我放弃了addClass，而removeClass动态地放弃了.modal-backdrop。

在网上看了很多文章后，我找到了a code snippet。当show.bs.modal 和hide.bs.modal 事件触发时，它addClass 和removeClass 到body，这是.modal-backdrop 的父级。

ps：我用Bootstrap 4.5。

CSS

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

Javascript

$('#myModalId').on('show.bs.modal', function(e) {
     $('body').addClass('no-modal-bg');
}).on('hidden.bs.modal', function(e) {
     // 'hide.bs.modal' or 'hidden.bs.modal', depends on your needs.
     $('body').removeClass('no-modal-bg');
});

参考文献

【讨论】：

【解决方案12】：

$(".modal").on('shown.bs.modal', function() {
    $('.modal-backdrop').css('background', '#00000073');
});

【讨论】：