CSS壓制屏幕，如JavaScript警報

所以我有一個隱藏的div，顯示在$(document).ready()顯示一個表單登錄或註冊本身。我試圖讓顯示屏看起來像傳統的Javascript警報一樣受到抑制。我正處於測試階段，只是使用一個爲身體設置不透明度的類，但它也適用於彈出式div。我試圖只爲背後的一切設置不透明度。這是我的。CSS壓制屏幕，如JavaScript警報

$("body").not("#overlay").addClass("suppress");

我試過其他幾個變化，以排除該div，但我不知道它這是可能的，因爲我申請到body。你有什麼建議可以帶領我走向正確的方向嗎？

來源

2012-01-14 Naterade

你可以在體內和彈出之間plonk的半透明DIV。這可能會阻止鼠標輸入到身體，這使它感覺模態。 – 2012-01-14 04:26:19

@MattyK作爲回答，因爲它可能是正確的。 – 2012-01-14 04:38:31

聽起來很不錯，我會試試看。 – Naterade 2012-01-14 04:41:40

您應該將#overlay格設置爲以下：

#overlay { 
    width: 100%; 
    height: 100%; 
    position:fixed; 
    z-index: 1000; 
    background: rgba(255, 255, 255, 0.7) 
}

半透明的白色背景疊加將具有降低人體的不透明度相同的效果。或者，您可以使用1px x 1px半透明.png背景圖像而不是rgba。

然後你可以使用#overlay內另一個DIV將居中形式：

#overlay .inner { 
    width: 200px; 
    height: 200px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: -100px 0 0 -100px 
}

這樣，你就不必擔心改變任何其他元素的CSS。

要你在你的答案中提到的做法發表評論：

這是我的理解是，當前的代碼是說：「發現沒有身份證‘疊加’，並添加類的任何主體元素抑制'「...換句話說，not（）僅適用於匹配元素的集合。如果你想要的是改變所有元素的透明度除了 #overlay，你可以做到以下幾點：

<body> 
    <div id="overlay"> 
      overlay stuff in here 
    </div> 

    <div id="other-content"> 
      All page content in here 
    </div> 
</body> 


$(document).ready(function(){ 
    $('#other-content').addClass('suppress'); 
});

來源

2012-01-14 04:52:19

你釘了它，謝謝你的幫助！ – Naterade 2012-01-14 05:11:26

CSS壓制屏幕，如JavaScript警報

回答

相關問題