Javascript – How to change background Opacity when bootstrap modal is open


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 class="modal-body"> 
      <div class="container">
        <div class="row">
          <div class="col-md-5">Hello</div>
          <div class="col-md-5">i!!!!</div>


modal-backdrop div

Best Answer

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

Set the opacity via CSS

    opacity:0.5 !important;

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