CODEWITHSUNDEEP
cssmodal-dialogbootstrap-modal
MagicLuckyCat
MagicLuckyCat

Reputation: 344

Bootstrap 3 modal-backdrop not graying out

My modal window appears transparent and the background is not grayed out over the page. The HTML format looks correct compared with other examples.

Here's the JSFiddle

<p>
Some back ground stuffSome back ground stuffSome back ground stuffSome back ground stuffSome back ground stuff
Some back ground stuffSome back ground stuffSome back ground stuffSome back ground stuffSome back ground stuff
Some back ground stuffSome back ground stuffSome back ground stuffSome back ground stuffSome back ground stuff
Some back ground stuffSome back ground stuffSome back ground stuffSome back ground stuffSome back ground stuff
Some back ground stuffSome back ground stuffSome back ground stuffSome back ground stuffSome back ground stuff
Some back ground stuffSome back ground stuffSome back ground stuffSome back ground stuffSome back ground stuff
</p>

<div class="modal-backdrop">
  <div class="modal show" id="myModal" data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">          
          <h4 class="modal-title">My Modal</h4>
        </div>
        <div class="modal-body">
          <p>My Modal Body</p>
        </div>        
      </div>
    </div>
  </div>
</div>

CSS:

.modal-backdrop {
  background-color: gray !important;
  opacity: 0.9;
}

Upvotes: 2

Views: 2940

Answers (1)

D. Werle
D. Werle

Reputation: 186

I think you are missing a width/height declaration.

The following seems to be doing the trick:

.modal-backdrop {
  background-color: rgba(100, 100, 100, 0.8);
  width: 100vw;
  height: 100vh;
}

JSFiddle example

Upvotes: 3

Related Questions