title: Dim background screen when modal popup opens
body: <p>I have a modal popup that opens on a button click. I am trying to dim the background when the popup open but I can't get it to work.</p>
  
  <p>This is what I have:</p>
  
  <p>JavaScript:</p>
  
  <pre><code>function popup(centername, centertype, area, address, province, itprovider, software, addon,
                 principalname, principleemmail, itname, itemail, itno, academicname, academicno, academicemail,
                 invigilatorname, invigilatorno, invigilatoremail, centeridep, provinceidep, centernameep, centertypeidep, id) {
      var $dropdown = $("#ddlCenterType");
      $("#txtCenterName").val(centername);
      $("#txtArea").val(area);
      $("#txtAddress").val(address);
      $("#ddlProvince").val(province);
      $("#ddlProvider").val(itprovider);
      $("#ddlSoftware").val(software);
      $("#ddlAddOn").val(addon);
  
      $("#txtPrincipalName").val(principalname);
      $("#txtPrincipalEmail").val(principleemmail);
      $("#txtITName").val(itname);
      $("#txtITemail").val(itemail);
      $("#txtITNumber").val(itno);
      $("#txtAcadName").val(academicname);
      $("#txtAcadNumber").val(academicno);
      $("#txtAcadEmail").val(academicemail);
      $("#txtInvName").val(invigilatorname);
      $("#txtInvNumber").val(invigilatorno);
      $("#txtInvEmail").val(invigilatoremail);
  
      $("#txtCenterId").val(centeridep);
      $("#txtProvinceID").val(provinceidep);
      $("#txtCtrName").val(centernameep);
      $("#txtTypeID").val(centertypeidep);
      $("#txtID").val(id);
      $dropdown.val(centertype);
      $("#popupdiv").dialog({
          width: 1250,
          height: 1290,
          autoOpen: true,
          modal: true,
          open: function (event, ui) {
              $(".ui-widget-overlay").css({
                  background: "rgb(0, 0, 0)",
                  opacity: ".50 !important",
                  filter: "Alpha(Opacity=50)",
              });
          },
          buttons: {
              Close: function () {
                  $(this).dialog("close");
              }
          }
  
      });
  }
  </code></pre>
  
  <p>I also added this in the CSS but still doesn't work:</p>
  
  <pre><code>.ui-widget-overlay {
      opacity: .50 !important;
      filter: Alpha(Opacity=50) !important;
      background-color: rgb(50, 50, 50) !important;
  }
  </code></pre>
  
  <p>I know this question has been asked a couple of times but I still can't get it to work. Please assist. Thanks!</p>