Question

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

这就是我所拥有的：

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

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

Answer 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

模态弹出窗口打开时暗淡的背景屏幕

1 个答案: