1

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

<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>，将打开一个弹出窗口，那时我想将弹出分区显示为突出显示并且正文应该是暗淡的..

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

提前致谢。

4

3 回答 3

1

问题是您的孩子 divpopupContact继承了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/的链接

于 2013-02-06T13:21:21.547 回答
0

您可以使用 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();
}
于 2013-02-06T13:13:32.973 回答
0

尝试使用“背景颜色”，你也有一个尾随逗号。

于 2013-02-06T13:15:38.787 回答