我如何淡出整個HTML頁面，但不是一個div？

我試圖使頁面淡出時，我使用的代碼按一下按鈕：我如何淡出整個HTML頁面，但不是一個div？

$("#post_btn").click(function(){ 
    $("#address-popup").css({display: "block"}); 
    $("html,body").fadeTo("slow",0.4); 
});

問題是我不希望的div #address-popup褪色爲好。有沒有一種方法可以排除html,body淡入淡出？

來源

2012-07-26 user1451848

大多數人做的是略有不同。你會添加一個不透明的div來覆蓋整個頁面，並在該div的頂部放置'＃address-popup'。 – lbstr 2012-07-26 15:25:14

嘗試谷歌搜索「模態」。 – j08691 2012-07-26 15:25:25

好的我怎麼能添加一個覆蓋整個頁面的div？或什麼是以我想要的方式覆蓋div的最佳方式並淡入所有背景？沒有使用插件即時通訊嘗試學習代碼並使用插件太無聊 – user1451848 2012-07-26 15:29:54

不，你不能。您不能褪色整個文檔，但不能褪色文檔中的某些元素。

你正在以這種錯誤的方式去做。似乎讓背景變暗的彈出窗口通常附加一個半透明的覆蓋div，對話框位於其上。這是覆蓋div部分遮掩頁面;該頁面本身並不實際淡出。

來源

2012-07-26 15:24:43 meagar

我會補充說這些通常被稱爲「模態彈出窗口」或「模態對話框」，許多庫（包括jQuery UI）已經有了實現。 HTTP：// jQueryUI的。com/demos/dialog /＃modal – Jeff 2012-07-26 15:27:10

我現在已經添加了一個覆蓋div，但是如何將我的框添加到覆蓋層的頂部，使其看起來不會淡出？ - – user1451848 2012-07-26 15:43:44

您的對話框需要成爲疊加層的姐妹元素，它不能包含在其中。使用比覆蓋div更高的Z-index。 – meagar 2012-07-26 15:44:40

我認爲你最好通過覆蓋<div>併爲其提供透明度來創建衰落背景的「幻覺」。給這個<div>一個z-index高於頁面內容的其餘部分。

然後，爲了增加您的其他#address-popup div位於褪色頁面上方的錯覺，請確保它具有比透明<div>更高的z-indez。

來源

2012-07-26 15:28:14 Widor

我現在已經添加了一個覆蓋div，但是如何將我的框添加到覆蓋層的頂部，使其看起來不會淡出？ - – user1451848 2012-07-26 15:43:50

使用'z-index' CSS屬性將其設置爲比覆蓋層更高的數字。除了'＃address-popup' div之外，覆蓋層應該高於覆蓋的所有內容。 – Widor 2012-07-26 15:45:47

您不能擁有隱藏父項的可見子項。你需要的是將你的彈出添加到你的body元素，然後淡出body內的所有其他元素。

HTML：

<body> 
    <div class="header"> 
    </div> 
    <div class="content"> 
    </div> 
    <div class="footer"> 
    </div> 
    <div class="popup"> 
    </div> 
</body

JS：

$("#post_btn").click(function(){ 
    $("body > div:not(.popup)").fadeTo("slow",0.4); 
});

來源

2012-07-26 15:28:58 Rodik

錯字，意在添加>（直接孩子）。現在修好了 – Rodik 2012-07-26 15:31:26

這對於真實世界的頁面來說是非常簡單和不實用的，但它在技術上可以回答這個問題。然而，這個問題的人並不真正瞭解他們最適合的問題。使用覆蓋div絕對是一個更好的解決方案。 – meagar 2012-07-26 15:33:33

謝謝我已經做了覆蓋div :)我是新的創造互動內容哈哈 – user1451848 2012-07-26 15:36:21

我在這裏測試的解決方案和它的工作...

$("#post_btn").click(function(){ 
    $("body :not(#address-popup)").fadeTo("slow",0.4); 
});

效果很不錯...

來源

2012-07-26 15:42:16

HTML

<div class="blind"></div> 
<div class="topDiv"> 
<h1>Popup Effect DIV</h1> 
<p>This DIV will still display when the rest of the page has been faded out</p> 
</div> 
<a class="fadeOut">Load Popup.</a>

CSS

.blind { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    background-color: #FFF; 
    width: 100%; 
    height: 100%; 
    z-index: 2000; 
    opacity: 0.9; 
    filter: alpha(opacity = 90); 
    display: none; 
} 
.topDiv { 
    display: none; 
    width: 250px; 
    height: 250px; 
    border: solid 1px red; 
    background-color: #FFF; 
    z-index: 2000; 
    position: absolute; 
    top: 50px; 
    left: 250px; 
}

/* Load Popup and fade background */ 
$('.fadeOut').click(function(e){ 
    $('.blind').toggle(); 
    $('.topDiv').toggle(); 
}); 
/* Close popup and loose fade when you click outside the popup */ 
$(document).mouseup(function (e){ 
    var container = $('.topDiv'); 
    if (!container.is(e.target) && container.has(e.target).length === 0){ 
     container.hide(); 
     $('.blind').hide(); 
    } 
});

來源

2013-12-19 17:00:14 Gravesy

我如何淡出整個HTML頁面，但不是一個div？

回答

相關問題