我用了我在一個教程上看到的東西,但是它似乎對我來說有一個問題,因為我在谷歌上看了其他帖子,但是沒有人幫助我解決這個問題。 如何讓我的模態對話框不透明?
這是它的樣子 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">×</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>
覆蓋該模式的默認不透明度:
.modal-backdrop,
.modal-backdrop.fade.in{
opacity: 1;
filter: alpha(opacity=100);
background: #fff;
}
如果以上方法不起作用,請嘗試!重要關鍵詞:
.modal-backdrop,
.modal-backdrop.fade.in{
opacity: 1 !important;
filter: alpha(opacity=100) !important;
background: #fff;
}
我也面臨同樣的問題, 我補充道: style="background: #fff" in <div class="modal-content " >最后看起來.. & ltdiv class = " modal-content " style = " background:# fff " & gt。
而且它看起來很有效! 干杯。