CSS & HTML & JQuery - Cómo mostrar un div OVER otros divs y configurar para ellos un fondo sombreado

Necesito algunas cosas como esta: cuando hago clic en algún enlace, toda la página debe ponerse sombreada, y quiero mostrar un nuevo div (como 200px X 200px) en el centro de la página, sobre otro div (así que no "float").CSS & HTML & JQuery - Cómo mostrar un div OVER otros divs y configurar para ellos un fondo sombreado

Como poner este nuevo div en relieve y hacer que el otro div (fondo) no se pueda cliquear.

¿Cómo puedo hacerlo? Creo CSS debe hacerlo, y espero que mi solicitud está claro :)

Gracias

ACTUALIZACIÓN (Añadido mi propio código)

// HTML + Jquery 
<body> 
    <div class="contenitore"> 
     <div id="myBox" class="boxHidden"> 
      Box I Want To Display 
     </div> 

     <div class="contenitoreSite"> 
      <script type="text/javascript"> 
       $(document).ready(function() { 
        $(".articles").click(function() { 
         $('.contenitoreSite').fadeTo('fast', 0.5); 
         $('#myBox').removeClass().addClass('box'); 
         $('#myBox').fadeTo('fast', 1); 
        }); 
       }); 
      </script> 

      <a class="articles" href="#" onclick="return false;">Example</a> 
     </div> 
    </div> 
</body> 

// CSS 
.boxHidden{display:none;} 
.box{width:500px; height:500px; position:absolute; top:80px; left:240px; border:#000000 2px solid; background-color:#FF0000;} 
.contenitore{width:980px; margin:0 auto; position:relative;} 
.contenitoreSite{width:980px; margin:0 auto;}

Mis problemas reales:

1 - Quiero poner toda la página (excepto la caja) con opacidad. Pero con esta función, cada niño obtiene el valor de opacidad 0.5. ¿Cómo puedo arreglar esto? This es cómo se muestra en este momento.

2 - ¿Este atributo es opacidad cross-browser? Porque leí que IE7 no lo soporta, pero con JQuery debería solucionar este tipo de problemas.

3 - Me gustaría poner el fondo (el sombrío) sin hacer clic. Creo que es posible hacer esto ...

RESUELTO

// HTML + Jquery 
<body> 
    <div class="contenitore"> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $(".articles").click(function() { 
        var maskHeight = $(document).height(); 
        var maskWidth = $(window).width(); 
        $('.mask').css({'width':maskWidth,'height':maskHeight}); 
        $('.mask').fadeIn(100); 
        $('.mask').fadeTo("fast",0.8); 

        var winH = $(window).height(); 
        var winW = $(window).width();   
        $("#myBox").removeClass().addClass('box');   
        $("#myBox").css('top', winH/2-$("#myBox").height()/2); 
        $("#myBox").css('left', winW/2-$("#myBox").width()/2); 
        $("#myBox").fadeIn(1000); 
       }); 
      }); 
     </script> 

     <div id="myBox" class="boxHidden"> 
      Box I Want To Display 
     </div> 

     <a class="articles" href="#" onclick="return false;">Example</a> 
    </div> 

    <div class="mask"></div>       
</body>  

// CSS 
.contenitore{width:980px; margin:0 auto; font-size:14px; color:#000000;} 
.boxHidden{display:none;} 
.box{width:500px; height:500px; position:absolute; z-index:9999; top:0px; left:0px; border:#000000 2px solid; background-color:#FF0000; display:none;} 
.mask {position:absolute; z-index:9000; top:0px; left:0px; background-color:#FFFFFF; display:none; }

Esta versión debe ser multi-navegador. Déjame saber lo que piensas;)

Fuente

2010-12-18 markzzz

opacidad no es transversal navegador. Non IE = 'opacidad: 0.5 'IE =' filtro: alpha (opacity = 50) ' – lnrbob

Sí, pero JQuery solucionará ese problema, creo :) – markzzz

Prefiero usar fondos de buen carácter y una fuerte fibra moral. He tenido que robarme las sombras en el pasado. – Ben

en realidad parece que necesitas algo como fancybox o lightbox.

Puede hacerlo usted mismo usando javascript y css. Si googleas 'creando ventana modal', encontrarás muchos resultados. Here es un ejemplo con 20 complementos y tutoriales para crear tales ventanas modales.

Fuente

2010-12-18 15:18:29 Tim

Si usted no está buscando algo demasiado sofisticado, y quiere hacerlo simplemente puede hacer esto:

<body> 
    <your content> 
    <div id="shader"> 
     <div id="window"> 
      <window content> 
     </div> 
    </div> 
</body>

y añadir a la CSS:

div#shader { 
    position: fixed; 
    top:0; 
    left:0; 
    background-image: url('gray70%opacity.png'); 
} 
div#window { 
    margin: auto; 
    background-color: white; 
    width: 200px; 
    height: 200px; 
}

Entonces, sólo hay una función de JavaScript que cambia la opacidad de la div del sombreador. Si usa jQuery, es simplemente: $('div#shader').fadeIn('fast')

Fuente

2010-12-18 19:05:00 appi2012

Para su segundo problema, eliminaría su div superpuesta del padre, y establecería su función jQuery tanto para disminuir la opacidad del primer div como para mostrar el segundo, por lo tanto el código sería:

<div id="MainContent"> 
</div> 
<div id="overlay"> 
</div>

jQuery:

$('div#MainContent').fadeTo('fast', 0.5) 
$('div#overlay').fadeTo('fast', 1)

Fuente

2010-12-19 21:09:38 appi2012

CSS & HTML & JQuery - Cómo mostrar un div OVER otros divs y configurar para ellos un fondo sombreado

Respuesta

Cuestiones relacionadas