我有一個div，我點擊一個按鈕後，我想div出現（我可以做），但我希望整個背景也變得更暗（這是重疊內聯）。使div出現，並將整個HTML更改爲更暗
我試過使用不透明度 - 我改變了整個HTML與jQuery的不透明度，即$('html').css('opacity','-0.5');和更改爲正常的div的不透明度，但由於某些原因，div的不透明度保持不變（0.5 ）。 我不太喜歡不透明，因爲它實際上並不會使背景更暗（更輕）。
HTML--
<a id="some-button" href="#">click me</a>
<div id="overlay-back"></div>
<div id="overlay"><span>YOUR HTML GOES HERE</span></div>
CSS--
html, body {
width : 100%;
height : 100%;
}
#overlay-back {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0.6;
filter : alpha(opacity=60);
z-index : 5;
display : none;
}
#overlay {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : 10;
display : none;
}
JS--
$('#some-button').on('click', function() {
$('#overlay, #overlay-back').fadeIn(500);
});
然後，只需將您的YouTube視頻嵌入代碼添加到overlay div，並將其設置爲適當的樣式，以便將其放在頁面上的所需位置。
這裏是一個演示：http://jsfiddle.net/EtHbf/1/
如果向下滾動 – JVK
，它將只覆蓋窗口的可視部分而不是整個頁面@jvk如果您希望覆蓋層即使在滾動時覆蓋視口，也可以使用'position：fixed'。如果你想讓它變成用戶不能滾動（頁面可以滾動到'position：fixed'元素的後面），那麼當你顯示覆蓋層時，你可以使'html'和'body'元素'hidden'溢出：'html，body {overflow：hidden}'。如果你這樣做，你可能需要保存滾動位置，你可以通過設置'body'元素的高度，然後將'overflow'屬性設置爲'hidden'。例如'$（'body'）.css（{height：$（'body'）。height（），overflow：'hidden'}）' – Jasper
[Here]（http://jsfiddle.net/eys3d/741/ ）和[這裏]（http://gasparesganga.com/labs/jquery-loading-overlay/）帶有**更多覆蓋效果**。希望有幫助。 – stom
你會想要一個'模態'對話框。它基本上是通過使用底層div和背景集來完成的。
jQuery UI在此支持：http://jqueryui.com/demos/dialog/#modal，但您可以通過檢查來了解它們是如何實現的。
你是說沒有簡單的快捷方式來做到這一點？我認爲這是幾行的jquery/html代碼 – user1073201
$（'＃modal'）。dialog（{modal：true}）;使用該庫時非常簡單。 – Vigrond
首先，對於不透明度，您不設置負數。 $('html').css('opacity','1');是固體並且完全可見，並且$('html').css('opacity','0');是完全不可見的。任何中間（0.2，0.5，0.7）得到更多的可見關閉它是1
其次，使背景暗，你可以這樣做：
1.我希望html的內容仍然可見，但只是較暗。 2-4我已經做到了。 – user1073201
確實我用0.5（而不是-0.5）。抱歉。 – user1073201
// video lightbox
$('.video_popup').height($(document).height());
// GET WINDOW SCROLLtop OFFSET
var winScrT;
$(window).scroll(function() {
winScrT = $(window).scrollTop();
});
$.getDocHeight = function() {
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
$('.play').click(function() {
$('.video_popup').height($.getDocHeight);
$('#popup').css({
top: (winScrT + 15) + 'px'
});
$('.video_popup').fadeTo(0, 0).css({
marginLeft: '0px'
}).fadeTo(600, 0.6);
});
$('.popup_close, .video_popup').click(function() {
$('.video_popup').fadeTo(600, 0, function() {
$('.video_popup').hide();
});
});.video_popup {
position: absolute;
margin-left: -9000px;
top: 0px;
left: 0px;
background: #000;
width: 100%;
z-index: 300;
}
.popup_content {
position: relative;
margin: 50px auto;
width: 560px;
color: #fff;
}
.popup_close {
position: absolute;
right: -55px;
top: -25px;
z-index: 2000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a class="play" href="javascript:void(0);">PLAY</a></p>
<div class="video_popup">
<div class="popup_content">
<a class="popup_close" href="javascript:void(0);"><img src="_/images/close.png"></a>
<object width="560" height="315">
<param name="movie" value="http://www.youtube.com/v/-pJcKCqxtAM?version=3&hl=en_US&atuoplay=1">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/v/-pJcKCqxtAM?version=3&hl=en_US&atuoplay=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"/>
</object>
</div>
</div>該演示似乎沒有在IE9中做任何事情。 – Jasper
對於更長的頁面，非常重要的行$（'。video_popup'）。height（$（document）.height（））。再次感謝 – user1073201
@Jasper感謝！ （P.S.我沒有IE9測試但感謝TOT的LOT，請欣賞它） –
下面是這種行爲的另一個例子，在演示：點擊「看視頻」鏈接在視頻和屏幕亮度調節器的div褪色（逃避淡出）
CSS：
#screenDimmer,#video {display:none;position:absolute;}
#screenDimmer {top:0;left:0;width:100%;height:100%;background:#000;opacity:.5;
/* ie opacity */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);}
#video {top:50%;left:50%;margin-left:-240px;margin-top:-193px;}
HTML：
<div id="screenDimmer"></div>
<div id="video"><!-- embedded video here --></div>
現在可以比以前更容易完成了。只需使用絕對盒子陰影。
#yourDIV {
box-shadow: 0px 0px 1px 5000px rgba(0,0,0,0.8);
}
而不是5000px值，你可以使用100vmax更適應性。 –
您好我改變了人誰張貼在這裏的代碼，即使這可能可以解決已經在這裏是碧玉
HTML的更新代碼：
<a id="some-button" href="#">click me</a>
<div id="overlay-back"></div>
<div id="overlay"><iframe src="http://www.youtube.com/embed/08DjMT-qR9g" width="340"
height="250"></iframe><br><br><button id="close"><img
src="http://icongal.com/gallery/image/89825/remove_close_button_x_delete.png"
height="50"
width="50"></button></div>
CSS：
html, body {
width : 100%;
height : 100%;
}
#overlay button{
opacity:0.5;
}
#overlay button:hover{
opacity:1;
}
#overlay-back {
position : absolute;
text-align :center;
width : 100%;
height : 100%;
background : #000;
opacity : 0.75;
filter : alpha(opacity=60);
z-index : 5;
display : none;
}
#overlay {
position : absolute;
text-align :center;
width : 100%;
height : 100%;
z-index : 10;
display : none;
}
jquery：
$('#some-button').on('click', function() {
$('#overlay, #overlay-back').fadeIn(1000);
});
$('#close').on('click',function(){
$('#overlay,#overlay-back').fadeOut(1000);
});
我希望這仍然可能幫助你，這個修改可能是有用的一些人
由我添加（關閉按鈕，改變了CSS的非常小的一部分，使用的YouTube VID而不是空無一）
我已經看到了實現這一目標的最簡單的事情是這樣的：
$("#overlay").css("-webkit-filter","blur(5px)");
$("#overlay").css("-moz-filter","blur(5px)");
$("#overlay").css("-o-filter","blur(5px)");
$("#overlay").css("-ms-filter","blur(5px)");
$("#overlay").css("filter","blur(5px)");
$("#overlay").css("pointer-events", "none");
在點擊一個按鈕，我們有上述步驟運行。 「覆蓋」是我們想要模糊的div的ID。腳本的成功執行後，在最後我們能夠做到這一點，以重新啓用DIV：
$("#overlay").removeAttr("style");
如果div有一個黑色的背景再高不透明度值將背景暗，而低級的將使它更輕。 – Pointy