突出顯示彈出部分使用jquery

這是我的代碼，但仍然沒有得到我期望的輸出。突出顯示彈出部分使用jquery

<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>單擊，彈出窗口將被打開，在那個時候，我想顯示彈出師所強調和身體應該是暗淡..

任何有用的答案會很感激..

在此先感謝。

來源

2013-02-06 Basith

我寫了如何創建花哨的彈出式教程教程，讓我知道如果你想看到它.. – phpalix

我已經做了花哨的盒子..但我想突出顯示該部分給用戶。這就是它... – Basith

是的請張貼在這裏.. – Basith

問題是你的孩子的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/

來源

2013-02-06 13:21:21 Sedz

它不工作...仍然回來.. – Basith

使用此背景顏色：rgba（0， 0,0,0.5）; – Sedz

是的，我用背景顏色，但我沒有得到自己.. – Basith

您可以使用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-06 13:13:32 CyberBrain

我改變了body標籤的位置。 – Basith

嘗試還你有一個結尾逗號有使用「背景色」。

來源

2013-02-06 13:15:38

沒有使用這個..仍然它的外觀與前一個一樣... – Basith

值得一試雖然... –

突出顯示彈出部分使用jquery

回答

相關問題