Introduccion
En esta lección, no revelaré el secreto a los diseñadores experimentados de diseño y los gurús de CSS, pero este artículo será útil para los principiantes. Aquí es donde puede aprender cómo crear ventanas emergentes en la parte superior de un sitio completo.
Muy a menudo, estas ventanas aparecen después de realizar ciertas acciones en el sitio, por ejemplo, el usuario hace clic en el enlace "Solicitar una devolución de llamada" y aparece un formulario de pedido frente a él.
Es muy conveniente usar ventanas emergentes junto con ajax, pero este es el tema de otra lección.
Cada vez aparecen más recursos web en la red que utilizan ventanas emergentes PopUp. Como ejemplo, podemos dar a todos las redes sociales familiares.
Se elimina todo el exceso de datos de las capturas de pantalla.Vkontakte
Facebook
Twitter
Creo que hay suficientes razones para comenzar a estudiar la pregunta: cómo hacer que PopUp aparezca en su sitio.
Declaración del problema (TOR)
Debe crear una ventana emergente con una pantalla de atenuación en la parte superior de todo el sitio.
Solución
Método 1
html
<div class="b-container"> Sample Text </div> <div class="b-popup"> <div class="b-popup-content"> Text in Popup </div> </div>
css
*{ font-family: Areal; } .b-container{ width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; } .b-popup{ width:100%; height: 2000px; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; } .b-popup .b-popup-content{ margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; }
Resultado:
Muy a menudo sugieren usar:
position:absolute;
Sí, el resultado es similar, pero debido al hecho de que hemos establecido la altura del bloque de "atenuación", aparecen barras de desplazamiento. Por eso este método no es adecuado.
Método 2
Este método no difiere fundamentalmente del Método 1, pero me parece más conveniente.
HTML (sin cambios)
<div class="b-container"> Sample Text </div> <div class="b-popup"> <div class="b-popup-content"> Text in Popup </div> </div>
Css
*{ font-family: Areal; } .b-container{ width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; } .b-popup{ width:100%; min-height:100%; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; } .b-popup .b-popup-content{ margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; }
El resultado es similar.
Debido a la propiedad:
altura mínima: 100%; nuestro bloque de "atenuación" ha adquirido un ancho del 100% y una
altura mínima del 100% de la pantalla.
La única desventaja de este método es que Internet Explorer solo admite esta propiedad desde la versión 8.0.
Añadiendo Magia a Jquery
Ahora agregue enlaces para ocultar / mostrar nuestra ventana emergente.
Para hacer esto, debe conectar la biblioteca jQuery y un pequeño script:
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script> <script> $(document).ready(function(){
También necesita actualizar el HTML:
<div class="b-container"> Sample Text <a href="javascript:PopUpShow()">Show popup</a> </div> <div class="b-popup" id="popup1"> <div class="b-popup-content"> Text in Popup <a href="javascript:PopUpHide()">Hide popup</a> </div> </div>
Resultado
Ahora, cuando se carga la página, la ventana emergente emergente desaparecerá.
Si hacemos clic en el enlace "Mostrar ventana emergente", aparecerá una ventana emergente. Y si hace clic en el enlace "Ocultar ventana emergente", la ventana emergente desaparecerá nuevamente.
El resultado se puede ver aquí:
http://jsfiddle.net/p7NbX/15/