如何创建具有透明背景的引导模式

Question

我的模态有问题，它显示黑色背景而不是透明背景。这可能是与 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">&times;</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-->

点击查看输出

更新！！它工作得很好。但是模式被放置在一个与页面高度相同的玻璃盒子里。我可以将其限制为高度、宽度属性，但我更想知道原因。 点击查看输出

原文由 Fatima.S 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如我所见，Bootstrap 有类 .modal-backdrop 并且他们将背景颜色设置为黑色，您可以使用以下代码覆盖它：

 .modal-backdrop {
     background-color: rgba(0,0,0,.0001) !important;
}

原文由 Gallaoui 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您使用的是 Bootstrap 4，则只需将“打开模式”按钮的 HTML 中的属性“data-backdrop”设置为“false”。

例如 <button data-backdrop="false">Open modal</button>

原文由 Jack Lin 发布，翻译遵循 CC BY-SA 4.0 许可协议