如何创建透明背景bootstrap模型

z0qdvdin 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(5)|浏览(268)

我有一个问题的模态，它显示黑色背景，而不是透明的。这可能是一个问题有关的CSS。注意：我在课堂上改变了不透明度：0.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-->

**一个

更新！！它工作得很完美。但是模态文件被放在一个玻璃盒子里，和页面高度一样。我可以限制它的高度和宽度属性，但是我更想知道原因。Click to see output

twitter-bootstrap

来源：https://stackoverflow.com/questions/44155471/how-to-create-bootstrap-modal-with-transparent-background

5条答案

按热度按时间

mxg2im7a1#

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

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

赞(0）回复(0）举报 2022-12-16

bvuwiixz2#

如果你使用Bootstrap 4，你可以仅仅在HTML中将“openmodal”按钮的属性“data-background”设置为“false”。
例如<button data-backdrop="false">Open modal</button>

赞(0）回复(0）举报 2022-12-16

0pizxfdo3#

嘿你需要用这个代码覆盖 Bootstrap css。如果你试图添加没有重要关键字的样式属性，样式就不起作用，用这个替换你的代码。

modal-backdrop {
  background-color: transparent !important;
}

赞(0）回复(0）举报 2022-12-16

643ylb084#

我可以通过重写CSS组件中的以下类来解决这个问题。简单地说，我将背景更改为透明并删除边框。

.modal-content {
    background-color: transparent !important;
    border: 0px !important
}

.modal-header {
    border: 0px !important
}

完整实施可从以下位置获得：https://codesandbox.io/embed/react-bootstrap-playground-forked-hrz6x?fontsize=14&hidenavigation=1&theme=dark

赞(0）回复(0）举报 2022-12-16

jogvjijk5#

.modal { 
    --bs-modal-bg: #00000000 !important; 
}

用于 Bootstrap 5

赞(0）回复(0）举报 2022-12-16

我来回答

如何创建透明背景bootstrap模型

5条答案

相关问题

热门标签

最新问答