Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Popup con JQuery
#1
Sonrisa 
Aquí les traigo el código para poner el nuevo popup con JQuery en tu web.

Ingresa lo siguiente en el CSS de tu web:

Código:
<style type="text/css">
#popup {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1001;
}

.content-popup {
    margin:0px auto;
    margin-top:100px;
    padding:10px;
    width:700px;
    min-height:250px;
    border-radius:4px;
    background-color:#000000;
    box-shadow: 0 2px 5px #666666;
}

.close {
    position:relative;
    left:700px;
}
</style>
Y el siguiente código en el <body> :

Código:
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#open').click(function(){
        $('#popup').fadeIn('slow');
    });

    $('#close').click(function(){
        $('#popup').fadeOut('slow');
    });
});
</script>
<div id="popup" style="display: yes;">
    <div class="content-popup">
        <div class="close"><a href="#" id="close"><img src="/close.png"/></a></div>
        <div>Aqui el contenido de tu Popup</div>
    </div>
</div>
Eso es todo.
Descargate aqui el jquery:
JQuery

Remplazar el /close.png por una imagen alojada en tu host. Generalmente es una "X".
Espero les sirva, comenten y den +1 Gracias!

Aqui un DEMO
Viva Skylium!
#2
editado el post para poner el codigo entre sus etiquetas correspondientes
WWW
#3
Excelente! Seguro me servirá para implementarlo en alguna página web.
Muchas gracias por compartirlo.
WWW
#4
Muy bueno amigo! Sonrisa
#5
Popup en jquery vaya se ve bueno y facil, lo descargare a ver que tal es buen aporte
WWW
#6
excelente amigo solo seria bueno agregar una demo para q todos comprendamos x mi parte todo bien me encanto Sonrisa
WWW
#7
(14-01-2013, 05:00 AM)shackur escribió: excelente amigo solo seria bueno agregar una demo para q todos comprendamos x mi parte todo bien me encanto Sonrisa

Ya agregue un DEMO. Me alegro de que les guste.
Viva Skylium!
#8
Gracias por esto, lo utilizar en mi web amigo!
#9
Muchas gracias, me vinieron un par de ideas...
#10
mucha gracias. se ve intersante he visto algunas webs con esto. aunque no se mucho de esto me interesa.


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  jQuery: ocultar imágenes rotas Jvh_22 10 726 03-01-2017, 09:26 PM
Último mensaje: gassip
Estrella [Aporte] La nueva generación de jQuery tendrá cambios en su nomenclatura carlsmartg 1 322 03-08-2016, 09:23 PM
Último mensaje: Boreas
  [Duda] Como implementar Jquery.cookie llProKsll 3 394 11-02-2016, 01:55 PM
Último mensaje: Vicen
Información [Tutorial] Detectar AdBlock y mostrar mensaje (jQuery) DarkMaster 7 690 28-01-2016, 03:32 PM
Último mensaje: TapaJerez
  Libro de jQuery en español CarlosAlberto 1 434 30-12-2015, 11:39 PM
Último mensaje: habacuc78
  [Tutorial] jQuery HTML5 Form Plugin - jQuery Form Plugin luis.ml 0 309 16-08-2015, 02:02 AM
Último mensaje: luis.ml
Ladrillo Como usar botones "disabled" y activarlos por JQuery Kevin9908 0 380 25-06-2015, 04:38 PM
Último mensaje: Kevin9908
  [Jquery] Contar carácteres de un input DipDip 0 1,282 04-02-2015, 09:28 PM
Último mensaje: DipDip
  [Ayuda]Como hacer Funcionar 2 Buscadores JQUERY AngelKrak 2 477 28-12-2014, 06:14 AM
Último mensaje: AngelKrak
  Snowfall: Efecto nieve con jquery warez 2 720 20-12-2014, 03:31 AM
Último mensaje: Lob3zNo



Usuarios navegando en este tema: 1 invitado(s)