Cómo hacer un pop up con jQuery - Masterhacks Blog

Cómo hacer un pop up con jQuery

Algunas veces necesitamos mostrar alguna información en un sitio web, pero no queremos que se vea a simple vista ni que se abra en otra página. ¿Cómo se soluciona esto?, lo más evidente sería con un pop up, es decir, una ventana emergente, lo más sencillo sería utilizar JavaScript para crearlo, pero se ve feo y podría aparentar ser un malware.

Para hacer el pop up más estético, podemos utilizar jQuery, que ofrece algunos efectos interesantes para un sitio web. En este caso, utilizaremos HTML, CSS y jQuery, con un efecto de desvanecimiento.

Para comenzar, es necesario agregar los scripts en el sitio web, sólo agrega el siguiente código en la cabecera de tu página:

 
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script> $(document).ready(function(){
$('#open').on('click', function(){
$('#popup').fadeIn('slow');
$('.popup-overlay').fadeIn('slow');
$('.popup-overlay').height($(window).height());
return false; });  
$('#close').on('click', function(){ $('#popup').fadeOut('slow');
$('.popup-overlay').fadeOut('slow');
return false; }); });
</script>

Con el script anterior, al dar clic en algún enlace con id=»open», se abrirá la ventana con el mensaje que se requiera mostrar. De igual forma, al dar clic en un enlace con id=»close», se cerrará la ventana, en este caso, sería la X en la ventana.

En el cuerpo de la página se coloca el siguiente código. Si no cuentas con otros efectos parecidos, no tendrás problema en colocarlo donde quieras, dentro de las etiquetas <body> </body>, pero si ya estás utilizando otros elementos <div> en la página, es probable que tengas problemas en la posición de la ventana emergente, por lo que tendrás que acomodarlo dentro de la sección de la página donde lo requieras.

<div id="popup" style="display: none;">     
<div class="content-popup">        
 <div class="close"><a href="#" id="close"><img src="images/close.png"/></a></div>         
<div>          
<h2>Título del pop up</h2>             
<p>Texto de la ventana</p>             
<div style="float:left; width:100%;">      </div>         </div>     </div> </div> <div class="popup-overlay"></div> 


Y lo que sigue es darle estilo a la ventana, para esto, crearemos una hoja de estilos CSS, con el siguiente código:

 
#popup {
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1001;
}  
.content-popup {
margin:0px auto;
margin-top:120px;
position:relative;
padding:10px;
width:500px;
min-height:250px;
border-radius:4px;
background-color:#FFFFFF;
box-shadow: 0 2px 5px #666666;
}  
.content-popup h2 {
color:#48484B;
border-bottom: 1px solid #48484B;
margin-top: 0;
padding-bottom: 4px;
}  
.popup-overlay {
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 999;
display:none;
background-color: #777777;
cursor: pointer;
opacity: 0.7;
}  
.close {
position: absolute;
right: 15px;
}

Recuerda colocar la etiqueta link en la cabecera de la página utilizar esta hoja de estilos, agregando el código:

<link href="css/style.css" rel="stylesheet">

En caso de que requieras colocar varias ventanas emergentes con el mismo efecto, será necesario cambiar el id de cada una.

Ejemplo de ventana emergente con jQuery efecto desvanecimiento
Gracias por apoyar el libre conocimiento con tu donación!
Bitcoin: bc1q4sw9260twfcxatj8mjp7358cyvrf8whzlelyhj
Ethereum: 0xFb93D2a3c9d1A0b83EE629c2dE1725BCa192e581
Litecoin: LbFduJmHvQXcpCnwfUT7aJ4DYoWSL3iQw8
Dogecoin: D7QQVqNR5rk215A4zd2gyzV9P2bLQtZHFV
Transferencia bancaria en México:
Cuenta CLABE: 646180224401848086 Nombre: Masterhacks LATAM Banco: STP

Unete a nuestros grupos:
WhatsApp: https://chat.whatsapp.com/C8fqiz3aDDc58VRRd1vdrb
Telegram: https://t.me/masterhacks_net
Canal de WhatsApp https://whatsapp.com/channel/0029VaBBLCn5vKAH9NOWCl3K

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *