Cómo crear una ventana emergente CSS simple en su página web

Agregar el código

1. Agregue este código dentro de la etiqueta principal de su página web:

   script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'>/script> 

   1. El código anterior hará referencia a la biblioteca en línea disponible. Si su página web no se está ejecutando en línea, debe descargar la biblioteca jquery y vincularla a su página web.
2. Agregue el código HTML emergente a su página web. Asegúrese de que esté por encima de la etiqueta del cuerpo cerrado.

   body> div>  div>  div class="popup">  div class="popupWindow"> div class="popup_txt"> Are you 18 years of age or older? div> div class="popup_img"> img src="yes.png" class="popup_img_yes"/> img src="no.png" class="popup_img_no"/> div> div> div>  body> 

   1. Todos los divs son contenedores separados donde los referimos individualmente por el id y los nombres de clase.

3. Agrega este CSS dentro de la etiqueta de estilo.

   style> .popup{ position:fixed; width:100%; height:100%; left:0px; right:0px; top: 0px; bottom:0px; background-color:rgba(3,3,3,0.8); } .popupWindow{ background-color:white; margin:0px auto; width:40%; min-width:400px; min-height:300px; margin-top:12%; text-align: center; -moz-border-radius: 50px 50px / 50px 50px; border-radius: 50px 50px / 50px 50px; box-shadow: 10px 10px 5px #000; } .popup_txt{ font-size:26px; font-weight:bold; margin:10px; padding-top:100px; color:green; } .popup_img{ maring:10px; } .popup_img_yes,.popup_img_no{ margin:20px; } style> 

   1. El CSS se aplica a los elementos div haciendo referencia a su identificación y nombres de clase. La identificación es referida por #idName y la clase es referida por .className
4. Agregue estos scripts de jquery en su página web dentro de la etiqueta head. Todo el script debe estar escrito dentro de la etiqueta del script.

   script> $(document).ready(function(){ $( ".popup_img_yes" ).click(function() { $( ".popup" ).fadeOut( 1200 ); }); $( ".popup_img_no" ).click(function() { window.open("https://www.google.com","_self"); }); }); /script> 

5. Sepa como funciona. El jquery se usa para manejar el evento de clic en el botón “sí” y “no” y su acción correspondiente.

   1. Si se hace clic en Sí, se llama al método .fadeOut (1200); aquí la ventana emergente desaparecerá en 1,2 segundos.
   2. Si se hace clic en No, la página se vuelve a cargar con la URL google.com utilizando la función window.open. El atributo “_self” indica que la URL se carga en la misma pestaña.