CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Fatima.S
Fatima.S

Reputation: 93

how to create bootstrap modal with transparent background

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

Upvotes: 9

Views: 59133

Answers (5)

pellyadolfo
pellyadolfo

Reputation: 991

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

for Bootstrap 5

Upvotes: 0

jrpanda
jrpanda

Reputation: 1

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

Upvotes: 0

Jack Lin
Jack Lin

Reputation: 51

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

Upvotes: 4

Gallaoui
Gallaoui

Reputation: 511

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

Upvotes: 22

user6417847
user6417847

Reputation:

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

Upvotes: 1

Related Questions