How can I change the background color of Bootstrap modal?

Question

As the title suggests I want to change the color of the actual modal, not the shaded area behind the modal. As this post says. I just want to change the color of the modal. Heres some code:

<div class="portfolio-modal modal fade" id="HighSchoolModal" tabindex="-1" role="dialog" aria-hidden="true" style="background-color:#F07A1A !important;">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <h2>Parktown Boys' High</h2>
                            <hr class="star-primary">
                            <img src="img/portfolio/park.jpg" class="img-responsive img-centered" style="width:50%" alt="">
                            <p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
                            <ul class="list-inline item-details">
                                <li>Client: <strong><a href="http://startbootstrap.com">Start Bootstrap</a></strong>
                                </li>
                                <li>Date: <strong><a href="http://startbootstrap.com">April 2014</a></strong>
                                </li>
                                <li>Service: <strong><a href="http://startbootstrap.com">Web Development</a></strong>
                                </li>
                            </ul>
                            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

I've used style="background-color:#F07A1A !important;" on the code and in the chrome element inspector it shows the color is in being applied:

The problem... my modal is still white. Any ideas how I can change the background color?

Answer 1

将样式应用于modal-content 。

Answer 2

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

Answer 3

best way is to overwrite bootstrap variable

Bootstrap have a variable called $modal-content-bg

You would need to overwrite this variable to change the background color of modal. This is what worked for me.