Сделайте 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&amp;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&amp;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");