Сделайте div и измените весь html на более темный
У меня есть div, и после того, как я нажму кнопку, я бы хотел, чтобы div появился (что я могу сделать), но мне бы хотелось, чтобы весь фон стал темнее (это встроено с наложениями).
Я пробовал использовать непрозрачность - я изменяю непрозрачность всего html с помощью jQuery, т.е. $('html').css('opacity','-0.5'); и изменяю непрозрачность div в нормальное состояние, но по какой-то причине непрозрачность div остается неизменной ( 0,5).
Мне не совсем нравится непрозрачность, поскольку на самом деле это не делает фон темнее (довольно светлее).
Ответы
Ответ 1
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 в div overlay и настройте его соответствующим образом, чтобы разместить его там, где вы хотите на странице.
Вот демо: http://jsfiddle.net/EtHbf/1/
Ответ 2
Это можно сделать еще проще, чем раньше. Просто используйте абсолютную коробчатую тень.
#yourDIV {
box-shadow: 0px 0px 1px 5000px rgba(0,0,0,0.8);
}
Ответ 3
Во-первых, для непрозрачности вы не устанавливаете отрицательное число. $('html').css('opacity','1'); является сплошным и полностью видимым, а $('html').css('opacity','0'); полностью невидимым. Все, что находится между ними (0,2, 0,5, 0,7), становится более заметным, чем близко к 1.
Во-вторых, чтобы сделать задний фон темнее, вы можете сделать это:
- Создайте div, который заполняет экран
- Установите z-index на этот div выше, чем весь контент
- Установите фон в черный цвет и непрозрачность до 0,5.
- Поместите видео youtube в другой div с более высоким индексом z, чем div, который вы только что сделали с черным фоном.
Ответ 4
Вам нужен диалог "модальный". В основном это достигается с помощью базового div и фонового набора.
jQuery UI поддерживает его здесь: http://jqueryui.com/demos/dialog/#modal, но вы можете видеть, как они это делают, проверяя.
Ответ 5
// 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>
Ответ 6
Вот еще один пример этого поведения в демо: нажмите ссылку "смотреть видео", чтобы исчезнуть в div и div диммерах экрана (побег исчезнет)
jsfiddle demo
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>
Ответ 7
Привет, я изменил код кого-то, кто разместил здесь, хотя это может быть решено уже здесь, - это обновленный код jasper
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)
Ответ 8
Простейшая вещь, которую я видел для этого, заключается в следующем:
$("#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");
При нажатии кнопки мы должны выполнить над шагами. "overlay" - это идентификатор div, который мы хотим размыть. После успешного выполнения script, в конце мы можем сделать это, чтобы снова включить div:
$("#overlay").removeAttr("style");
