Question

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

<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>，会打开一个弹出窗口，在那个时候我想把弹出分区显示为高亮显示，身体应该是暗淡的。

任何有用的答案都会非常感激..

提前致谢。

Answer 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/

Answer 2

您可以使用z-index在弹出窗口下方添加某种容器div。所以你最终得到这样的东西：

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

popupContainer和popupContact ids应该有一些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();
}

Answer 3

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

使用jquery突出显示弹出部分

3 个答案: