模式弹出窗口打开时背景屏幕变暗答案

【问题标题】：Dim background screen when modal popup opens模式弹出窗口打开时背景屏幕变暗
【发布时间】：2018-02-05 04:50:32
【问题描述】：

我有一个在单击按钮时打开的模式弹出窗口。当弹出窗口打开时，我试图调暗背景，但我无法让它工作。

这就是我所拥有的：

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

我知道这个问题已被问过几次，但我仍然无法解决问题。请协助。谢谢！

【问题讨论】：

“暗淡”是什么意思？变暗？
是的，让它变暗。
后面有黑色/较深的元素吗？
不，但我正在尝试使弹出窗口的背景更暗。
是的，但为什么降低不透明度会使它变暗，除非它背后有暗的东西？

标签： javascript jquery css

【解决方案1】：

只需从不透明度中删除 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>

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

【讨论】：

我错过了这个链接。当我添加这个。它工作得很好！ <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />谢谢！