56

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

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

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

12 回答 12

107

要通过以下方式更改颜色：

CSS

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

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

较少的

将引导变量更改为：

@modal-backdrop-bg:           red;

来源

萨斯

将引导变量更改为：

$modal-backdrop-bg:           red;

来源

引导定制器

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

getbootstrap.com/customize/

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

于 2012-05-14T15:16:08.737 回答
12

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

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

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

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

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

于 2014-10-08T02:32:06.737 回答
7

CSS

如果这不起作用：

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

试试这个：

.modal { 
   background-color: red !important; 
}
于 2015-11-06T22:10:40.817 回答
6

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

.modal-backdrop {
   background: none;
}
于 2015-12-11T10:22:57.720 回答
3

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

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

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

于 2014-06-23T01:23:33.167 回答
3

对于Bootstrap 4，您可能必须.modal-backdrop.show在和.!importantbackground-coloropacity

例如

.modal-backdrop.show {
   background-color: #f00;
   opacity: 0.75;
}
于 2019-07-08T22:48:57.870 回答
2

添加以下CSS；

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

<div class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
...
于 2016-08-20T21:47:34.647 回答
1

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

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

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

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

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

于 2015-10-09T12:21:07.560 回答
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 一起使用

于 2019-04-08T09:58:51.073 回答
0

对于 Angular(7+) 项目：

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

否则，您可以使用：

.modal-backdrop.show {
    opacity: 0.7 !important;
}
于 2020-02-28T18:39:15.870 回答
0

当modal出现时，它会在出现之前触发事件show.bs.modal。我试过Safari 13.1.2了MacOS 10.15.6。当show.bs.modal事件触发时，.modal-backgrop尚未插入body。

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

在网上查看了很多文章后，我找到了一个代码片段。它addClass和removeClass，body它是.modal-backdrop，whenshow.bs.modal和hide.bs.modal 事件触发的父级。

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');
});

参考

  1. google之后的代码片段
  2. Bootstrap 4.5，模态，#events
  3. 引导程序 4.5 文档
于 2020-09-10T08:24:10.543 回答
0 

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

于 2022-03-04T17:57:33.833 回答