我的模态有问题,它显示黑色背景而不是透明。 这可能是与CSS相关的问题。 注意:我在类.fade中更改了Opacity:.7,但这并没有影响任何内容
<!-- Modal -->
<div class="modal fade" id="myModal" style="position:fixed; top:0px; left:800px;width:600px; background:none; " role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Adding Wall</h4>
</div>
<div class="modal-body">
<label>Wall Id: </label><input type="text" id="wallNametxt"/><br>
<label>Wall Name:</label><input type="text" id="wallNametxt1"/>
</div>
<div class="modal-footer">
<input type="button" id="btn" value="Add!" name="save" class="btn btn-default"/>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div><!--End of Modal-->
更新!! 它工作得很好。但是模态被放置在具有相同页面高度的玻璃盒中。 我可以将其限制为高度,宽度属性,但我更愿意知道原因。 Click to see output
答案 0 :(得分:8)
我可以看到Bootstrap有类.modal-backdrop
并且他们将背景颜色设置为黑色,您可以使用以下代码覆盖它:
.modal-backdrop {
background-color: rgba(0,0,0,.0001) !important;
}
答案 1 :(得分:1)
嘿你需要用这段代码覆盖bootstrap css。我尝试添加没有重要关键字的样式属性,样式不起作用用这个代替你的代码。
modal-backdrop {
background-color: transparent !important;
}
答案 2 :(得分:0)
如果使用的是Bootstrap 4,则可以将“打开模式”按钮的HTML中的属性“数据背景”设置为“假”。
例如<button data-backdrop="false">Open modal</button>