如何創建具有透明背景的bootstrap模態

我對模態有問題，它顯示黑色背景而不是透明。這可能是一個與CSS有關的問題。注：在類.fade 0.7，但沒有造成任何影響如何創建具有透明背景的bootstrap模態

<!-- 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 the Output

更新!!：我改變不透明度它工作完美。但是模式被放置在與頁面高度相同的玻璃盒中。我可以限制高度，寬度屬性，但我更願意知道原因。 Click to see output

來源

2017-05-24 Fatima.S

它工作正常，什麼是您的瀏覽器？ – GmaSa

提供正確的代碼，如果可能的話創建工作片段。 –

MS Edge，Google Chrome –

，我可以看到引導具有類.modal，背景和他們設置背景色爲黑色，U可以使用此代碼

.modal-backdrop { 

background-color: rgba(0,0,0,.0001) !important;

}

來源

2017-05-24 10:21:49 GmaSa

非常感謝。這工作完美，但我仍然有邊框或玻璃框周圍的模態。我可以限制高度和寬度，但我想知道爲什麼，並從那裏修復它 –

@Fatima檢查Bootstrap的標準，如果你不知道這裏是一個鏈接https://msdn.microsoft.com/en-us /library/gg699337(v=vs.85).aspx，請你確認我的答案嗎？ – GmaSa

嘿，你需要覆蓋此用這段代碼覆蓋bootstrap css。我嘗試添加沒有重要關鍵字的樣式屬性樣式不工作替換您的代碼與此。

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

來源

2017-05-24 10:32:06 shubham

如何創建具有透明背景的bootstrap模態

回答

相關問題