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

Question

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

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

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

Answer 1

As I can see Bootstrap have the class .modal-backdrop and they are setting the background color to black, you can overwrite this with this code:

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

Answer 2

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.

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

Answer 3

if you are using Bootstrap 4, you could just set the attribute "data-backdrop" in the HTML of the "open modal" button to "false".
eg <button data-backdrop="false">Open modal</button>

Answer 4

I was able to solve this issue by overriding the following classes in my component CSS. In brief, I changed the background to transparent and removed borders.

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

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

Complete implementation available here: https://codesandbox.io/embed/react-bootstrap-playground-forked-hrz6x?fontsize=14&hidenavigation=1&theme=dark