Bootstrap modal is transparent

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

Overwirte непрозрачности по умолчанию, что модальный.

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

И это, кажется, работает как шарм! Cheers.