How to change background Opacity when bootstrap modal is open

Question

I am using bootstrap modal. When modal is open background content opacity is not changed by default. I tried changing in js using

function showModal() { document.getElementById("pageContent").style.opacity = "0.5"; 

}

This is working but whenever modal is closed opacity style still remains for the pageContent. But, I am sure this is not the right way to do. Any help appreciated. Thanks. Html button which opens Modal is

<button class="btn glossy-clear" data-toggle="modal" data-target="#modal-display" onclick="showModal()">Clear</button> 

Modal Code is

 <div class="modal fade" id="modal-display">    <div class="modal-dialog">     <div class="modal-content">      <div class="modal-header">      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>       <h4 class="modal-title">Search results</h4>      </div>     <div class="modal-body">        <div class="container">         <div class="row">           <div class="col-md-5">Hello</div>           <div class="col-md-5">i!!!!</div>          </div>       </div>      </div>   </div>  </div> </div> 

EDIT:

Answer 1

I am assuming you want to set the opacity of the modal background...

Set the opacity via CSS

.modal-backdrop {     opacity:0.5 !important; } 

!important prevents the opacity from being overwritten - particularly from Bootstrap in this context.

Answer 2

You can override the modal-backdrop opacity in your stylesheet [take note of the .in class]

.modal-backdrop.in {     opacity: 0.9; } 

http://jsfiddle.net/ThisIsMarkSantiago/r0gwn005/1/