Change the background color in a twitter bootstrap modal

Question

When creating a modal in twitter bootstrap  is there any way to change the background color   Remove the shading entirely   NB  For removing shading  this doesn t work  because it also changes the click behavior    I still want to be able to click outside the modal to close it        myModal   modal     backdrop  false

User · Answer

If you need to remove shading for only one type of modal windows, you can simply add ID to your modal window

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

and in you css file add the following

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

If you need to remove shading for all modal windows, just skip the step with assigning ID.

User · Answer

CSS  If this doesn t work    modal-backdrop      background-color  red      try this    modal       background-color  red  important

User · Answer

To change the color via   CSS  Put these styles in your stylesheet after the bootstrap styles    modal-backdrop      background-color  red      Less  Changes the bootstrap-variables to    modal-backdrop-bg            red    Source  Sass  Changes the bootstrap-variables to    modal-backdrop-bg            red    Source  Bootstrap-Customizer  Change  modal-backdrop-bg to your desired color   getbootstrap com customize     You can also remove the backdrop via Javascript or by setting the color to transparent

User · Answer

I used couple of hours trying to figure how to remove background from launched modal  so far tried    modal-backdrop      background  none      Didn t work even I have tried to work with javascript like     lt script type  text javascript  gt          modal-id   on  shown bs modal    function                 modal-backdrop in   hide            lt  script gt    Also didn t work either  I just added  data-backdrop  false    to    lt div class  modal fade  id  myModal  data-backdrop  false  gt        lt  div gt    And Applying css CLASS   modal       background-color  transparent  important       Now its working like a charm This worked with Bootstrap 3

User · Answer

Add the following CSS    modal  modal-dialog  modal-content   background-color   d4c484      lt div class  modal fade  gt   lt div class  modal-dialog  role  document  gt   lt div class  modal-content  gt

User · Answer

For Angular 7   Project     ng-deep  modal-backdrop show       opacity  0 7  important      Otherwise you can use    modal-backdrop show       opacity  0 7  important

User · Answer

For Bootstrap 4 you may have to use  modal-backdrop show and play around with  important flag on both background-color and opacity    E g    modal-backdrop show      background-color   f00     opacity  0 75

User · Answer

It gets a little bit more complicated if you want to add the background to a specific modal  One way of solving that is to add and call something like this function instead of showing the modal directly   function showModal selector          selector  modal  show            modal-backdrop   addClass  background-backdrop        Any css can then be applied to the background-backdrop class

User · Answer

When modal appears  it will trigger event show bs modal before appearing  I tried at Safari 13 1 2 on MacOS 10 15 6  When show bs modal event triggered  the  modal-backgrop is not inserted into body yet  So  I give up to addClass  and removeClass to  modal-backdrop dynamically  After viewing a lot articles on the Internet  I found a code snippet  It addClass and removeClass to the body  which is the parent of  modal-backdrop  when show bs modal and hide bs modal  events triggered  ps  I use 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         References  The code snippet after google Bootstrap 4 5  modal   events Bootstrap 4 5 documents

User · Answer

remove bootstrap modal background try this one    modal-backdrop      background  none

User · Answer

If you want to change the background color of the backdrop for a specific modal  you can access the backdrop element in this way       myModal   data  bs modal    backdrop   Then you can change any css property via  css jquery function  In particular  with background       myModal   data  bs modal    backdrop css  background-color   orange     Note that     myModal   has to be initialized  otherwise  backdrop is going to be null  Same applies to  bs modal data element

[twitter-bootstrap] Change the background color in a twitter bootstrap modal?

Examples related to twitter-bootstrap