如何更改 Bootstrap 模态的背景颜色？

Question

正如标题所示，我想更改实际模态的颜色，而不是模态后面的阴影区域。正如post 所说。我只想更改模态的颜色。下面是一些代码：

<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>

我在代码中使用了style="background-color:#F07A1A !important;"，在 chrome 元素检查器中它显示颜色正在被应用：

问题...我的模态仍然是白色的。有什么想法可以改变背景颜色吗？

Answer 1

将样式应用于.modal-content。

Answer 2

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