[英]how to create bootstrap modal with transparent background
我的模態有問題,它顯示黑色背景而不是透明。 這可能是與 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-->
更新!! 它工作得很好。 但是模態被放置在一個與頁面高度相同的玻璃盒子中。 我可以將其限制為高度、寬度屬性,但我更想知道原因。 點擊查看輸出
我可以看到Bootstrap有類.modal-backdrop
,他們將背景顏色設置為黑色,你可以使用以下代碼覆蓋它:
.modal-backdrop {
background-color: rgba(0,0,0,.0001) !important;
}
嘿你需要用這段代碼覆蓋bootstrap css。 我嘗試添加沒有重要關鍵字的樣式屬性,樣式不起作用用這個代替你的代碼。
modal-backdrop {
background-color: transparent !important;
}
如果您使用的是Bootstrap 4,則可以將“open modal”按鈕的HTML中的屬性“data-backdrop”設置為“false”。
例如<button data-backdrop="false">Open modal</button>
我能夠通過覆蓋組件 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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.