logo标签列表

如何在 Twitter Bootstrap 模态框中更改背景颜色？

twitter-bootstrap
61

在使用 Twitter Bootstrap 创建模态框时，有没有办法更改背景色？完全删除遮罩层？

注意：要删除遮罩层，这种方法不可行，因为它还会改变单击行为。（我仍希望能够单击模态框外部来关闭它。）

$("#myModal").modal({
  backdrop: false
});
1
注意，从可用性的角度来看，保留点击关闭行为而没有任何视觉反馈（例如完全删除遮蔽）是一种非常糟糕的体验。用户无法知道他们在背景中的点击是“安全的”，不会进入控件下面。同样，也没有任何指示让用户知道他们可以点击背景来首先解除模态框。 - Rebecca
12个回答
116

通过以下方法更改颜色：

CSS

将这些样式放在Bootstrap样式之后的样式表中：

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

Less

将 bootstrap 变量更改为：

@modal-backdrop-bg:           red;

源代码

Sass

将Bootstrap变量更改为：

$modal-backdrop-bg:           red;

源码

Bootstrap定制器

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

getbootstrap.com/customize/

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

请确保在bootstrap.css之后添加这些行，以便它可以与Sass或无预处理器一起使用。你试过了吗？ - HaNdTriX
第一次尝试时犯了个错误，谢谢你纠正我。 - Abe
你只需要在你的CSS文件之前包含bootstrap.css，并覆盖所需的类来主题化模态框，这就是CSS的全部意义...它是层叠的。 - GEverding
要找出要修改的Bootstrap类，您可以打开检查元素。我对Bootstrap还很陌生，没有找到一个好的资源来了解所有关于Bootstrap类的细节以及它们在哪里使用。 - Anna Rouben
我在modal-content对象上使用了快速的内联样式： style="background-color: transparent; border: 0px;" - Kyle Burkett
13

如果您想改变特定模态的背景幕布的背景颜色，可以通过以下方式访问幕布元素：

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

然后您可以通过.css jQuery函数更改任何CSS属性。特别是background（背景）：

$('#myModal').data('bs.modal').$backdrop.css('background-color','orange')
请注意，$('#myModal')必须要初始化，否则$backdrop将会是null。对于bs.modal数据元素也是一样的。
1
这对于针对特定模态框的定位完美地起作用。看起来初始化非常迅速，所以可以直接在 $('#myModal').modal(); 之后添加此行代码（如果不行，则必须将其包装在 #myModal 的“shown”事件的事件侦听器中）。请注意，您可以使用 $('#myModal').data('bs.modal').$backdrop.addClass('myModal-backdrop');（正如@Simon-Bengtsson在他的答案中所示）而不是直接在javascript中放置css样式。 - Rebecca
1
$backdrop现在未定义。 - Ryan Griggs
也就是说，_backdrop为空。 - Ryan Griggs
7

CSS

如果这不起作用：

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

尝试这样做：

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

去除 Bootstrap 模态框的背景，请尝试以下方法：

.modal-backdrop {
   background: none;
}
3
请添加以下CSS；
.modal .modal-dialog .modal-content{  background-color: #d4c484; }

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

如果您想将背景添加到特定的模态框中，那么情况会变得有些复杂。解决这个问题的一种方法是添加并调用以下函数，而不是直接显示模态框：

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

任何CSS都可以应用于background-backdrop类。
3

对于Bootstrap 4，您可能需要使用.modal-backdrop.show并在background-color和opacity上使用!important标志进行调整。

例如：

.modal-backdrop.show {
   background-color: #f00;
   opacity: 0.75;
}
0
如果您需要仅针对一种模态窗口删除阴影，您可以简单地为您的模态窗口添加ID。
<div class="modal fade" id="myModal">...</div>

在你的 CSS 文件中添加以下内容。
#myModal .modal-backdrop {background-color: transparent;}

如果您需要为所有模态窗口删除阴影，只需跳过分配ID的步骤即可。
3
我先尝试了这个方法但完全没用。似乎Bootstrap将.modal-backdrop元素放在DOM中与#myModal元素完全不同的位置，而不是嵌套在其中。所以id为#myModal的元素与.modal-backdrop没有任何关系，CSS样式被忽略了。 - Rebecca
0

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

0

我花了几个小时试图弄清楚如何从打开的模态窗口中去掉背景，到目前为止尝试了以下：

.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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接