当模态弹出窗口打开时，调暗背景屏幕

Question

当模态弹出窗口打开时，调暗背景屏幕

6

我有一个模态弹窗，它会在点击按钮时打开。我试图在弹窗打开时使背景变暗，但我无法让其正常工作。

这是我的代码：

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

    });
}

我也在CSS中添加了这个，但仍然不起作用：

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

我知道这个问题已经被问了好几次，但我仍然无法让它正常工作。请帮忙解决。谢谢！

- Lyubomir Ivanov Valchev

“dim”是什么意思？是指让它变暗吗？ - CodeAt30

是的，让它变暗。 - Lyubomir Ivanov Valchev

它的背后是否有黑色/较暗的元素？ - CodeAt30

不是，但我正在尝试让弹出窗口的背景变暗。 - Lyubomir Ivanov Valchev

是的，但为什么降低不透明度会使它变暗，除非有一些暗色物体在其后面？ - CodeAt30

我正在遵循这个例子，它基本上是我所需要的： https://dev59.com/EG035IYBdhLWcg3wK8wm - Lyubomir Ivanov Valchev

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- azs06 · Accepted Answer

只需将不透明度中的important删除即可正常工作。虽然我建议使用CSS来完成这个任务。您可以在模态框打开和关闭时添加和删除类，并与ui-widget-overlay结合使用，以覆盖background和opacity。

以下是演示示例

$( 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>

这里是上面示例的plnkr https://plnkr.co/edit/GUW4NFEO9omn898n8aGm?p=preview