Html 如何创建具有透明背景的引导模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44155471/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to create bootstrap modal with transparent background
提问by Fatima.S
I have a problem with the modal, it shows black background instead of transparent. It might be a problem related to the CSS. Note: I changed Opacity:.7 in the class .fade but that didn't affect anything
我的模态有问题，它显示黑色背景而不是透明。这可能是与 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-->
Update!! It worked perfectly. But the modal is being placed in a glass box with the same height of the page. I can limit that to the height, width properties, but I would prefer to know the reason. Click to see output
更新！！它工作得很好。但是模态被放置在一个与页面高度相同的玻璃盒子中。我可以将其限制为高度、宽度属性，但我更想知道原因。 点击查看输出
回答by Gallaoui
As I can see Bootstrap have the class .modal-backdropand they are setting the background color to black, you can overwrite this with this code:
正如我所看到的，Bootstrap 有这个类.modal-backdrop并且他们将背景颜色设置为黑色，您可以使用以下代码覆盖它：
.modal-backdrop {
background-color: rgba(0,0,0,.0001) !important;
}
回答by Fatima.S
Hey You need to override the bootstrap css with this code. I you try to add style property without important keyword the style not work replace your code with this.
嘿，您需要使用此代码覆盖引导程序 css。我尝试在没有重要关键字的情况下添加样式属性，样式不起作用，用此替换您的代码。
modal-backdrop {
background-color: transparent !important;
}
回答by Hyman Lin
if you are using Bootstrap 4, you could just set the attribute "data-backdrop" in the HTML of the "open modal" button to "false".
e.g. <button data-backdrop="false">Open modal</button>
如果您使用的是 Bootstrap 4，您只需将“打开模式”按钮的 HTML 中的“数据背景”属性设置为“false”。
例如<button data-backdrop="false">Open modal</button>
