Haz que div aparezca y cambia todo el html para que sea más oscuro

Tengo un div y después de hacer clic en un botón, me gustaría que aparezca el div (lo que puedo hacer), pero me gustaría que todo el fondo se oscurezca también (esto está en línea con las superposiciones).

He intentado usar la opacidad: cambio la opacidad de todo el html con jQuery, es decir, $('html').css('opacity','-0.5'); y cambie la opacidad del div a normal, pero por alguna razón, la opacidad del div permanece igual (0.5). No me gusta mucho la opacidad, ya que en realidad no hace que el fondo sea más oscuro (algo más claro).

HTML–

 click me 
YOUR HTML GOES HERE

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); }); 

A continuación, solo agregue el código de inserción de video de YouTube al elemento div overlay y ajústelo de forma adecuada para colocarlo donde desee en la página.

Aquí hay una demostración: http://jsfiddle.net/EtHbf/1/

Esto puede hacerse ahora aún más fácil que antes. Solo usa la sombra de caja absoluta.

  #yourDIV { box-shadow: 0px 0px 1px 5000px rgba(0,0,0,0.8); } 

Primero, para la opacidad, no establece un número negativo. $('html').css('opacity','1'); es sólido y completamente visible, y $('html').css('opacity','0'); es completamente invisible. Cualquier cosa intermedia (0.2, 0.5, 0.7) se vuelve más visible al acercarse a 1.

En segundo lugar, para oscurecer el fondo puedes hacer esto:

  1. Crea un div que llena la pantalla
  2. Establezca z-index en ese div más alto que todo el contenido
  3. Establezca el fondo en negro y la opacidad en 0.5
  4. Pon el video de youtube en otro div con un índice z más alto que el div que acabas de hacer con el fondo negro

Querrías un diálogo ‘modal’. Básicamente se logra mediante el uso de un div subyacente y un conjunto de fondo.

jQuery UI lo admite aquí: http://jqueryui.com/demos/dialog/#modal , pero puede ver cómo lo hacen inspeccionando.

 // 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; } 
  

PLAY

Aquí hay otro ejemplo de este comportamiento, en la demostración: haga clic en el enlace “ver video” para fundir el video y divmer de la pantalla (escape para desvanecerse)

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:

 

hola cambié el código de alguien que publicó aquí, aunque esto ya puede ser resuelto aquí está el código actualizado de jaspe

html:

 click me 


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); }); 

Espero que esto aún pueda ayudarte y que esta edición puede ser útil para algunas personas

agregado por mí (botón de cerrar, cambió muy poca parte del CSS y usé un video de youtube en lugar de nada)

Lo más simple que he visto para lograrlo es esto:

 $("#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"); 

Al hacer clic en un botón, debemos ejecutar los pasos anteriores. “superposición” es la ID de div que queremos desenfocar. Después de la ejecución exitosa del script, al final podemos hacer esto para volver a habilitar el div:

 $("#overlay").removeAttr("style");