Ventana modal con jquery

por | Sep 8, 2009 | AJAX

Podriamos progamar una ventana modal desde cero pero es mucho más facil si usamos algun plugin de jquery, para eso voy a usar Simple Modal

Primero incluimos jquery y el plugin simple modal en nuestra cabecera

1
2
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.simplemodal-1.3.min.js "></script>

Luego debemos elegir que elementos deben ser afectados por simplemodal usando los selectores de jquery, con lo que podría quedar asi:

1
$("#sample").modal();

O podriamos incluir algunos parámetros adicionales como por ejemplo cambiar el color de fondo y la opacidad

1
2
3
4
$("#sample").modal({
    overlay:80,
    overlayCss: {backgroundColor:"#fff"}
});

Existen opciones más avanzadas como animaciones uso de iframes entre otras su pagina web