Question

我使用了我在教程中看到的内容，但似乎我有一个问题因为我在google上阅读了其他帖子，但没有人对我的问题提供帮助。如何让我的模态对话框不透明？

这里看起来像什么 http://i57.tinypic.com/20pr18w.png

这是我的代码

<div class="container">
    <div class="row text-center">
        <h3>Picture</h3>
        <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Upload a photo</a>
    </div>
</div>

<div class="modal-backdrop modal fade" id="basicModal" style="display: none;" data-backdrop="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Update Display Picture</h4>
      </div>
      <div class="modal-body col-xs-12">
       <div class="col-xs-4">
        <a href="#" class="btn btn-lg btn-success text-center" style=" margin-top:50%;width:150px; height:50px;"><i class="glyphicon glyphicon-plus"></i> Upload a photo</a>
        </div>

       <div class="col-xs-8">
       <h4 class="pull-right">PREVIEW</h4>
         <div class="center-block" style="background-image:url(img/default-picture.jpg);
            width: 200px;
             height: 200px;
             background-size: cover;
             display: block;
             border-radius: 100px;
             -webkit-border-radius: 100px;
             -moz-border-radius: 100px;">
         </div>
       </div>
      </div>
      <div class="modal-footer">
        <br>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>

</div>

Answer 1

覆盖该模态的默认不透明度。

.modal-backdrop, 
.modal-backdrop.fade.in{
opacity: 1;
filter: alpha(opacity=100);
background: #fff;
}

如果abover无效，请尝试使用"!important"关键字。

.modal-backdrop, 
.modal-backdrop.fade.in{
opacity: 1 !important;
filter: alpha(opacity=100) !important;
background: #fff;
}

Answer 2

我遇到了同样的问题，我已经添加了： style="background: #fff"中的<div class="modal-content"> 最后它看起来像.. <div class="modal-content" style="background: #fff">

它看起来像一个魅力！欢呼声。

Bootstrap模态是透明的

2 个答案: