javascript - 模态弹出窗口打开时背景屏幕变暗-6ren

javascript - 模态弹出窗口打开时背景屏幕变暗

转载作者：行者123 更新时间：2023-11-29 11:00:08

24

4

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

这是我的:

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

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

最佳答案

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

关于javascript - 模态弹出窗口打开时背景屏幕变暗，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48612027/

24

4

0

文章推荐： Javascript 数据逐个字母发送而不是搜索中的完整单词

文章推荐： c# - NHibernate 左连接与 linq

文章推荐： mysql - 我无法将数据从主表复制到临时表

Javascript - 除一部分外 Canvas 变暗/变暗
使用 Vanilla JS，我希望执行如下图所示的操作，其中除了特定部分(最好是椭圆形)之外，大部分 Canvas 都变暗。我可以通过在前面绘制半透明颜色来轻松使 Canvas 变暗，但我不确定如何
iphone - 使 UIView 变暗
我想将 UIView “变暗”一定程度。现在，我正在像这样进行变暗: UIView *overlay = [[UIView alloc] initWithFrame:mainView.bounds];
delphi - 如何使 GraphicControl 变暗
我有一个 TCard(TGraphicControl 组件)并且它有一个属性背景(TP图片) 我希望能够使背景变暗或变暗。因此，如果我可以在游戏中玩卡片，那么它是正常的。如果我不能在游戏中玩这张卡，那
vim - 使不活动的拆分 Pane 变暗
如果您熟悉 iTerm2 应用程序，您就会知道您可以像 vim 一样 Split View，并且不活动的 View 会“变暗”。我通常在 vim 中使用三个垂直 Split View，例如，通过将背
javascript - js 使颜色变亮/变暗
我正在尝试创建一些 jQuery 函数，将对象 bgcolor 更改为更亮或更暗(您将参数设置为色调差异)。我认为它应该可以工作，但是它破裂了。 $.fn.changeBg = function(di
java - 如何使背景中的 fragment 变暗？
我有两个 fragment ，其中一个具有完整 View 的大小。另一个 fragment 较小并放置在其上方。如何使第一个 fragment 变暗？最佳答案在 fragment XML 文件中，
iTerm2:阻止非事件 Pane 变暗
我在一个 Pane 中使用 irssi 和 nicklist.pl在另一个中，每当我在 irssi Pane 中时，昵称列表 Pane 就会变暗: 如何阻止非事件 Pane 变暗？最佳答案找到了!
ios - 变暗 UIImageView IOS
我试图做的是使 UIImageView 更暗，以便图像结果顶部的按钮和 View 。我想给它一个在 ios6 中用户使用 Facebook 分享时给出的效果。它后面的所有内容都变得更暗，但它是可见的。
java - 在加载动画期间使背景元素变暗/变暗 - Android
在单击登录按钮后出现的进度条微调器中，我希望当微调器在屏幕上可见时微调器后面的元素变暗或变暗。我的布局文件目前看起来像这样:
java - 使 TextView 变暗？
在我的应用程序中，我有一个带有进度条的刷新功能。进度条位于应该刷新的 TextView 上。问题是:如果 textview 中有很多文本，你就看不到进度条了。是否可以在 onPreExcute/onP
ios - 如何使操作表在调用时使周围的 View 变暗？
操作表自然会使背景 View 稍微变灰，但并不明显。我想让它变得更暗。还有，我要怎么做才能让您无法点击其他地方？现在，如果您在操作表外部单击，操作表就会消失。我希望这种情况不会发生 - 您必须按下“
html - 在整页、变暗、模糊的背景图像上添加居中文本？
我想创建一个主页，其背景图像填充整个页面高度。在此之上，我需要添加白色文本和其他元素。 This website是我想要实现的一个例子。我想要的: 外观: 使用下面的 CSS，文本看起来非常模糊。
ios - 我怎样才能使我的 ARSKView 变暗？
我一直在开发一款增强现实游戏，并且正在实现我的暂停菜单。我的暂停菜单完全可用，UIView 显示为 ARSKView 之上的另一层。但是，我想在显示暂停菜单时使 ARSKView 变暗，然后在关闭暂停
ios - 使按钮背景中的所有 View 变暗
我在 View 的右上角有一个菜单按钮 (+)，当按下按钮时，其他几个按钮会下拉供用户选择。我想有效地调暗所有这些按钮下方的所有 View 。我目前的做法是在所有内容之上设置一个透明 View ，
javascript - 将单页网站上的
变暗
我是网络开发的半菜鸟，但我不是在使用错误的术语进行搜索，就是我不是一个非常熟练的 googler。我正在制作一个单页网站，并且想要这样的效果，即当向下滚动新部分进入 View 时，新部分会变暗。我可
ios - 在不混合的情况下使不透明的 UIView 变暗
我的应用程序的背景是一个不透明的 UIImageView。在某些情况下，我想以动画方式将它从全亮度调暗到大约 50%。目前我降低了 View 的 alpha 属性并且效果很好。因为 View 后面没有
javascript - 如何像模式一样使警报周围的 div 变暗？
我需要向用户显示 alert 并且我希望它很漂亮。所以我使用 Bootstrap 的警报类，并像这样向用户显示 div: Some text 这段代码只显示了一个div。我想要的是将所有东
iphone - 如何使 UIImageView 变暗
我需要在触摸 UIImageView 时使它变暗，几乎就像跳板(主屏幕)上的图标一样。我应该添加具有 0.5 alpha 和黑色背景的 UIView 吗？这看起来很笨拙。我应该使用图层还是其他东西
c# - 使图像变亮/变暗/透明部分
我正在将图像加载到 BitmapImage 中并将其转换为 PixelColor 的数组。我想要的是能够操纵这些像素中的一些，使它们更亮/更暗/透明，但我似乎无法让它工作。将其设置为某种颜色确实有效，
android - 以编程方式使 View 变暗
我找到了 change the opacity of a View 的方法，但我实际上需要使 View 变暗。我最好的办法是在上面放一个透明的黑色矩形，然后慢慢增加矩形的不透明度。你知道更好的方法吗

首页

博学

6Ren·AI

商城

javascript - 模态弹出窗口打开时背景屏幕变暗