how to create bootstrap modal with transparent background

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;
}