0

I have a bootstrap modal like:

<div class="modal show" id="myModal" aria-hidden="true">
  <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>

It shows me the model at start but what I want is the background to be black.. or say like transparent when this modal appears and the background should be disabled ..

How can I do that?

Cœur
  • 37,241
  • 25
  • 195
  • 267
gamer
  • 5,673
  • 13
  • 58
  • 91
  • Possible duplicate of [Bootstrap Modal sitting behind backdrop](http://stackoverflow.com/questions/20983110/bootstrap-modal-sitting-behind-backdrop) – Rayon Mar 01 '16 at 08:35

1 Answers1

1

If you use the class modal show you can manually add <div class="modal-backdrop fade in"></div>, so the resulting code looks like:

<div class="modal show" id="myModal" aria-hidden="true">
  <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 class="modal-backdrop fade in"></div>

If you use modal fade as class, the modal-backdrop should appear automatically.

See: http://jsfiddle.net/dvv6dvug/

Markus Wagner
  • 171
  • 4