Blog
Compartimos con Ustedes nuestros conocimientos y de momentos interesantes
5 julio, 2018

Como hacer una ventana emergente (pop-up)?

Como hacer una ventana emergente

Como hacer una ventana emergente (pop-up) de la ventana. Es un tema que interesa cada programador novato. Y hoy veremos cómo hacer una ventana emergente. Lo que vamos a hacer va a ser muy interesante y funcional.

Así que, vamos a hacer una ventana que tengo en el sitio de uno de mis clientes. Para ver esto aquí. La gran ventaja de este método de creación de esta ventana es que no vamos a utilizar JavaScript, y nos limitaremos CSS3 y HTML5. En primer lugar, facilitar la descarga de nuestro sitio web. En segundo lugar, realizaremos todo en el cómodo y ligero como con un uso mínimo de código, lo que le permitirá realizar emergente de la ventana de cualquier tamaño, el color, la forma. Empecemos!

Imagina que ya tienes un sitio web y desea agregar un botón, por ejemplo, “de” o “en línea la solicitud”. Y desea que el usuario haciendo clic en este botón, vio la ventana de su pequeño tamaño, que permite introducir en ella los datos y, a continuación, enviar al administrador del sitio. Esta ventana vamos a hacer ahora.

Para empezar, vamos a crear este botón. Yo creo que es muy fácil hacerlo. Pero en la etiqueta <a href> debe escribir el siguiente #openModal. Así es como debería ser. Además, antes de la etiqueta de cierre </body> escribimos el código que se indica a continuación. Pero para la formalización de la vamos a utilizar, las clases, y para acceder a la ventana de ID (identificación). Siguiendo esta regla, podemos crear innumerables ventanas emergentes.

Ahora tenemos que hermoso todo formalizar y hacer que todo funcione correctamente. Empezar a desarrollar.

Como hacer una ventana emergente: formalización

Formalizamos nuestro enlace openModal.

El código anterior es muy simple. Pero para los novatos le guiará por las complicaciones posibles. Para que la ventana ha sido siempre en el mismo lugar, yo le hice una posición fija. También, para evitar que la ventana se vea estirado en toda la pantalla, me ha dado las coordenadas de las esquinas en el punto 0. Para el fondo tiene un color negro y se agregó la transparencia, así conseguimos el oscurecimiento alrededor de la ventana modal. Para que la ventana estaba encima del resto de elementos de la página se debe instalar una gran z-index. Para una apariencia más suave y la desaparición de la ventana modal, debe utilizar transition. Para ocultar la ventana, debe instalar el display none. La propiedad pointer-events permite controlar la interactividad (clics) de los elementos.

La apertura de la ventana emergente

Hemos hecho la decoración de las ventanas. Pero hasta ahora no funciona. Ahora será la más interesante. En CSS3 apareció la pseudo target, una cosa útil. Y en un ventana emergente sin él, es imposible. Esta pseudo-clase, si se especifica algún elemento que se define en la barra de direcciones como el id, en este caso es #openModal, las propiedades de este pseudo-clase serán más importantes que el elemento de destino.

La pseudo-clase target establece el DISPLAY en BLOCK y de esta manera se produce pop-up de la ventana. La propiedad POINTER-EVENTS controla la actividad de referencia.

Las propiedades de la DIV establece el ancho de la ventana, su posición en la pantalla y sangría para la instalación de la ventana en el centro de la página. El resto de las propiedades especifican los campos dentro de la página, la redondez de las esquinas y el fondo de la ventana con un degradado de blanco a gris oscuro.

El cierre de la ventana modal

Cuando se hace la apariencia de la ventana y se abre, debe hacer que el botón de cerrar la ventana, es decir, obtener e implementar la funcionalidad. El uso de CSS3 y HTML5 permite crear elegantes y personalizados, botones, sin necesidad de utilizar la imagen:

Para el botón que tiene un fondo de color, se especifica la posición y la alineación, así como el ancho de la línea. Botón redondo gracias a la instalación de las propiedades border-radius 12, opcional está instalada la sombra de ella.

Resulta

Nos ha resultado pop-up. Fue muy fácil. Esta ventana emergente se trabaja con cualquier sistema de control: joomla, wordpress o cualquier otra. También este método funciona bien en todos los navegadores. Creo que es una ventana emergente será la tarjeta de presentación de Su sitio, y la sencillez de su configuración posibilita ajustar el diseño de pop-u debajo de Tu sitio web en particular. Utilice.

Epígrafes:

Siempre estamos en contacto con usted

Antes de contactar con los contactos que aparecen aquí, le pedimos que compare los precios y condiciones de nuestros competidores.

Esto le dará Una idea amplia de cuánto cuesta los servicios en el desarrollo del sitio llave en mano, cuánto tiempo lleva crear una tienda en línea o un sitio de tarjeta de visita.

No tardaremos más de tres semanas. Gracias.