jQuery Modal Popup
jPopup es un plugin de jQuery para abrir ventanas emergentes que los desarrolladores web pueden descargar de forma gratuita e integrar en sus sitios web. Es totalmente personalizable y compatible con Mozilla Firefox, Google Chrome, Safari e IE 7 +.
En el ejemplo que vamos a ilustrar vamos a ver como utilizar este plugin añadiéndole algunos parámetros.
En la cabecera de vuestra página deberemos añadir la librería jQuery, el plugin y su llamada:
<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="modal.popup.js"></script>
<script language="javascript">
$(document).ready(function() {
//Change these values to style your modal popup
var align = 'center'; //Valid values; left, right, center
var top = 100; //Use an integer (in pixels)
var width = 500; //Use an integer (in pixels)
var padding = 10; //Use an integer (in pixels)
var backgroundColor = '#FFFFFF'; //Use any hex code
var source = 'demo.html'; //Refer to any page on your server, external pages are not valid e.g. http://www.google.co.uk
var borderColor = '#333333'; //Use any hex code
var borderWeight = 4; //Use an integer (in pixels)
var borderRadius = 5; //Use an integer (in pixels)
var fadeOutTime = 300; //Use any integer, 0 = no fade
var disableColor = '#666666'; //Use any hex code
var disableOpacity = 40; //Valid range 0-100
var loadingImage = 'lib/release-0.0.1/loading.gif'; //Use relative path from this page
//This method initialises the modal popup
$(".modal").click(function() {
modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
});
//This method hides the popup when the escape key is pressed
$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup(fadeOutTime);
}
});
});
</script>
Si te fijas bien en el script observarás que puedes personalizar totalmente la ventana modal o popup mediante parámetros que se pasan como argumentos a la llamada al plugin.
El contenido de la ventana modal lo tenemos en un archivo aparte «demo.html» y también es un parámetro más del plugin.
Y luego en el <body> podemos tener o un link o un botón para hacer aparecer el popup tras pulsarlo.
<a href="javascript:void(0);">Demo</a><br /><br /> <input type="submit" value="Demo" />
Ver más documentación
Descargar
Autor
¿Buscas trabajo de programador?
8 respuestas a “jQuery Modal Popup”
Deja una respuesta
28 artículos que te podrían interesar
Hola, excelente código, mi pregunta es, ¿cómo podría pasar el parámetro de la url a abrir? Gracias.
No se muestra el link para descargar el ejemplo, puedes actualizarla por favor
No funciona la web oficial del plugn
excelente tu ejemplo lo prove funcional bien, pero me gustaria saber como hago para,que desde la ventana emergente realizar un update a mi tabla ya obtengo los datos, pero me falta lo del update, me gustaria ver un ejemplo para guiarme, un saludo desde Colombia y veo que tenemos el mismo apellido..mil gracias por tu respuesta
Para hacer el update al menos tengo en mente 2 opciones:
1- Al pulsar el botón enviar el formulario por el método tradicional capturando los datos en el servidor mediante php.
2- Utilizar ajax para no recargar la página y realizar el update llamando a un archivo php que se encargará de realizar el update.
La primera opción es mucho más sencilla y supongo que no tendrás ningún problema, la segunda opción podría ser un nuevo post en mi blog.
Hola
El link de descarga está dañado.
Lo puedes por favor actualizar.
Gracias
Como pongo el botón de cerrar
En el demo.html tendrás que crear un botón o link que represente el cerrar y luego añadir lo siguiente dentro del document ready:
$(‘#close’).click(function() {
closePopup(fadeOutTime);
});
Al botón o link ponle id=»close»
No lo he probado pero debería funcionar.
saludos,