Dim background screen when modal popup opens

Question

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.

This is what I have:

JavaScript:

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");
            }
        }

    });
}

I also added this in the CSS but still doesn't work:

.ui-widget-overlay {
    opacity: .50 !important;
    filter: Alpha(Opacity=50) !important;
    background-color: rgb(50, 50, 50) !important;
}

I know this question has been asked a couple of times but I still can't get it to work. Please assist. Thanks!

No, but I am trying to make the background of the popup darker . — Lyubomir Ivanov Valchev, Feb 04 '18 at 20:11
yes but why would reducing the opacity make it darker unless there's something dark behind it? — CodeAt30, Feb 04 '18 at 20:12
I was following this example which sort of is what I need: https://stackoverflow.com/questions/5583995/set-jquery-ui-modal-dialog-overlay-background-color — Lyubomir Ivanov Valchev, Feb 04 '18 at 20:15

score 2 · Accepted Answer · answered Feb 04 '18 at 20:50

Just remove the important from opacity and it will work. Though I would recommend to use CSS for this. You can add and remove a class when modal opened and closed, and use it in combination with ui-widget-overlay to override background and opacity.

Here is a working example of how would that work

$( function() {
$("#dialog").dialog({
        width: 360,
        height: 290,
        autoOpen: true,
        modal: true,
        open: function (event, ui) {
            $(".ui-widget-overlay").addClass('modal-opened');
        },
        close: function(event, ui){
          $(".ui-widget-overlay").removeClass('modal-opened');
        }

    });
  } );

.ui-widget-overlay.modal-opened{
  background: rgb(0, 0, 0);
  opacity: 0.5;
  filter: Alpha(Opacity=50);         
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> 
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
 </div> 

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="script.js"></script>
</body>
</html>

Here is a plnkr of the above example https://plnkr.co/edit/GUW4NFEO9omn898n8aGm?p=preview

I was missing this link. When I added this. It worked perfectly! `` Thank you! — Lyubomir Ivanov Valchev, Feb 04 '18 at 21:06

Dim background screen when modal popup opens

1 Answers1