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

問題は、子のdivが不透明度 popupContactを継承していることですbody

したがって、考えられる回避策の1つは、代わりにこれを使用することです。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

「background-color」を使用してみてください。末尾にカンマがあります。

于 2013-02-06T13:15:38.787 に答える
0

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 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 に答える