Probé varios de ellos, unos más bonitos que otros y unos más complicados que otros, unos muy fáciles de poner y otros con un grado de dificultad muy elevado.
Al final el que se mira bien, funciona fácil y hace lo que quiero fue este:
1ro. Descarguen la librería: La que a mi me gusto esta en https://github.com/defunkt/facebox/zipball/v1.3
2do. Desmpacarla: puede ponerla donde sea, solo necesitamos unos archivos de todo el paquete.
3ro. Copiar del directorio src desempacado el archivo facebox.js al directorio donde tenemos nuestras librerías JQuery, yo los tengo en un directorio jq/, copie el archivo facebox.css a donde tengo los archivos de stylo, en mi caso css/, los archivos png y gif a mi directorio de imagenes,
4to. En nuestro HTML o PHP agregamos la línea:
<link href="css/facebox.css" media="screen" rel="stylesheet" type="text/css" />
El archivo de estilos para tamaños y colores de la popup
<script type="text/javascript" src="jq/jquery-1.4.4.js"></script>
La librería de jquery (última versión)
<script src="jq/facebox.js" type="text/javascript"></script>
La librería de la popup que desempacamos y copiamos a nuetro directorio
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : 'images/loading.gif',
closeImage : 'images/closelabel.png'
})
})
</script>
Código para darle algunas propiedades a nuestra librería, principalmente la localización de las imágenes.
5. Colocamos la llamada a nuestra popup:
<a href="#info" rel="facebox">levanta popup</a>
Esta es la llamada
<div id="info" style="display:none;">
<h2> Licencia de Uso<br></h2>
Bla bla bla bla bla bla<br>
Ble ble ble ble ble ble<br>
Bli bli bli bli bli bli<br><br><br>
<input type="submit" class="boton" value="ingresar" onclick="document.frmIngreso.submit();">
</div>
y esta es nuestra ventana popup que lo colocamos bajo la llamada o al final de nuestro html.
Y listo, tenemos una popup sencilla y bonita dentro de nuestro HTML.
Espero ayude.
Saludos
No hay comentarios:
Publicar un comentario