Ventana gris para padres cuando la ventana secundaria está activa

Estoy buscando una manera de hacer esto:

  1. Función Javascript que abre una ventana emergente que muestra una vista de lista de mis empleados
  2. Cuando la ventana emergente abre la ventana padre / abridor gris
  3. Cuando la ventana emergente se cierra, se elimina el “velo” de la ventana principal.

Gracias por cualquier código o ideas.

Heres una solución que he creado para esto, accesible a través de open() o close()

puedes pegar todo tu contenido dentro de #container

el html:

 Employees 

Employees

  • James
  • Jemima
  • lenny
  • etc..
Close

el css:

 * { font-family: Trebuchet MS; } #container {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222; z-index: 999999;} #container iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; } #block {background: #000; opacity:0.6; position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;} ul { padding:10px; background: #EEE; position: absolute; height: 200px; overflow: scroll;} ul li {color: #222; padding: 10px; font-size: 22px; border-bottom: 1px solid #CCC; } h3 { font-size: 26px; padding:18px; border-bottom: 1px solid #CCC; } #closebtn { top: 13px;position: absolute;right: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;} #closebtn:hover { cursor: pointer; background: #E5E5E5 } #empli { top: 13px;position: absolute;left: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;} #empli:hover { cursor: pointer; background: #E5E5E5 } 

El jquery:

 function open() { $('#block').fadeIn(); $('#container').fadeIn(); } function close() { $('#block').fadeOut(); $('#container').fadeOut(); } $(document).ready(function() { $('ul').css({width: $('#container').width()-20,height: $('#container').height()-90}) $('#closebtn').click( function() { close() }) $('#empli').click( function() { open() }) }); 

1.

Lo que entendí es esto …

Estás tratando de usar algo llamado “superposición” (pon el fondo gris en el niño mientras el padre está abierto). Esto se llama pop-ups modales, aquí te doy un enlace con complementos para usarlos con jQuery:

http://www.designlabelblog.com/2009/03/20-ways-to-create-javascript-modal.html

Hay varias variaciones sobre cómo hacer esto. Ante la misma necesidad, finalmente me decidí a usar jQuery.impromptu. Una vez que se definen los contenidos de la ventana, la destaco mientras canto al padre con una sola etapa:

  $.prompt(sFirstText,{overlayspeed:'fast',prefix:'wideJqi',top:80}); 

Puedes verlo en http://terryliittschwager.com/WB/JWB.php .

Impromptu está disponible en http://trentrichardson.com/Impromptu/ .

Solo use window.open luego agregue alguna condición que necesitará para oscurecer la ventana principal