使用 jquery 突出显示弹出部分答案

【问题标题】：Highlighting popup section using jquery使用 jquery 突出显示弹出部分
【发布时间】：2013-02-06 13:07:39
【问题描述】：

这是我的代码，但我仍然没有得到我期望的输出。

<head>
    <script>
        function overlay()
        {
            $("body").css ({
                "background" : "#fff",
                "z-index"    : "999",
                "opacity"    : "0.50",
                "position"   : "relative",
            });
            $("#popupContact").css ({
                "position"   : "relative",
                "z-index" : "999",
                "opacity"    : "1"
            });
        }
    </script>
</head>
<body>
   <div id="popupContact">
       <h1>Sample Test</h1>
   </div>
<a onclick="return overlay();">Click to view</a>
</body>

如果我点击那个<a>，会打开一个弹出窗口，此时我想将弹出分区显示为突出显示并且正文应该是暗淡的..

任何有用的答案将不胜感激..

提前致谢。

【问题讨论】：

我前段时间写了一篇关于如何创建精美弹出窗口的教程，如果你想看的话，请告诉我..
我已经完成了精美的盒子.. 但我想向用户突出显示该部分。就是这样……
是的，请在此处发布..
我不确定我是否理解你的帖子，但你可以试试这个，希望它能给你一些想法anchorx.com/ali/2011/03/16/jquery-popup-without-a-plugin

标签： php jquery html css jquery-ui

【解决方案1】：

问题是您的孩子 div popupContact 正在继承 body 不透明度

因此，一种可能的解决方法是使用它而不是 background:#fff

使用这个background-color: rgba(0,0,0,0.5);

<head>
    <script>
    function overlay()
    {
        $("body").css ({
            "background-color" : "rgba(0,0,0,0.5)",
            "z-index"    : "999",
            "position"   : "relative",
        });
        $("#popupContact").css ({
            "background-color" : "rgba(200,200,200,1)",
            "position"   : "relative",
            "z-index" : "9919",
            "opacity"    : "1"
        });
    }
    </script>
</head>
<body>
   <div id="popupContact">
       <h1>Sample Test</h1>
   </div>
<a onclick="return overlay();">Click to view</a>
</body>

这是小提琴的链接 http://jsfiddle.net/XFn67/

【讨论】：

请使用这个 background-color: rgba(0,0,0,0.5);
增加popupContact z-index或减少body z-index

【解决方案2】：

尝试使用“background-color”，你也有一个尾随逗号。

【讨论】：

【解决方案3】：

您可以使用 z-indexes 在弹出窗口的“下方”添加某种容器 div。所以你最终会得到这样的结果：

<div id="popupContainer"></div>
<div id="popupContact">
    <h1>Sample Test</h1>
</div>
<a onclick="return overlay();">Click to view</a>

popupContainer 和 popupContact id 应该有一些 css 属性来填满整个屏幕并将弹出窗口放在容器上方。

#popupContainer {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 10;
  background-color: #000;
  opacity: .5;
}

#popupContact {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 250px;
  margin-left: -150px;
  margin-top: -125px;
  z-index: 11;
}

overlay 函数应该改为：

function overlay() {
  $('#popupContainer, #popupContact').toggle();
}

【讨论】：

我改变了body标签的位置。