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

问题描述 投票:47回答:8

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

注意:要删除着色,这不起作用,因为它还会更改单击行为。 (我仍然希望能够在模态外单击以关闭它。)

$("#myModal").modal({
  backdrop: false
});
twitter-bootstrap
8个回答
91
投票

通过以下方式更改颜色:

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


9
投票

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

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

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

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

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


6
投票

CSS

如果这不起作用:

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

试试这个:

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

5
投票

删除bootstrap模态背景尝试这一个

.modal-backdrop {
   background: none;
}

3
投票

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

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

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


2
投票

添加以下CSS;

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

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

1
投票

如果只需要删除一种类型的模态窗口的阴影,只需将ID添加到模态窗口即可

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

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

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

如果需要删除所有模态窗口的着色,只需跳过分配ID的步骤即可。


1
投票

对于Bootstrap 4,您可能必须使用.modal-backdrop.show并在!importantbackground-color上玩opacity旗帜。

EG

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

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 CLASS

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

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

© www.soinside.com 2019 - 2024. All rights reserved.