Jquery modal for form posting

Greetings

I would like to use a jquery based modal library for dynamicly generating ajax based and forms as a modal to display and submit. I already use jquery ui for other purposes however I am not sure if jquery ui dialog is a good way of displaying such data by fetching lists of items via ajax and generating forms to post.

If 开发者_Python百科not, what modal library would you recommend for my task ?

Regards.

Also try jquery facebox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.

It's simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

I find ColorBox to be the best jQuery extension for this.

Fancybox

Very dynamic, and is just awesome!

Look at this: http://www.lewebmonster.com/ejemplos/ventanas-modales-con-jquery/

The HTML:

<a href="pruebas/iframe1.html"
   class="clsVentanaIFrame clsBoton"
   rel="Hola, esto es un iframe">Clic aqu&iacute; para abrir la ventana modal</a>

The Javascript:

$(function(){
    //evento que se produce al hacer clic en el boton cerrar de la ventana
    $('.clsVentanaCerrar').live('click',function(eEvento){
        //prevenimos el comportamiento normal del enlace
        eEvento.preventDefault();
        //buscamos la ventana padre (del boton "cerrar")
        var $objVentana=$($(this).parents().get(1));

        //cerramos la ventana suavemente
        $objVentana.fadeOut(300,function(){
            //eliminamos la ventana del DOM
            $(this).remove();
            //ocultamos el overlay suavemente
            $('#divOverlay').fadeOut(500,function(){
                //eliminamos el overlay del DOM
                $(this).remove();
            });
        });
    });

    $('.clsVentanaIFrame').on('click',function(eEvento){
        //prevenir el comportamiento normal del enlace
        eEvento.preventDefault();

        //obtenemos la pagina que queremos cargar en la ventana y el titulo
        var strPagina=$(this).attr('href')
        var strTitulo=$(this).attr('rel');

        //creamos la nueva ventana para mostrar el contenido y la capa para el titulo
        var $objVentana=$('<div class="clsVentana">'), $objVentanaTitulo=$('<div class="clsVentanaTitulo">');

        //agregamos el titulo establecido y el boton cerrar
        $objVentanaTitulo.append('<strong>'+strTitulo+'</strong>');
        $objVentanaTitulo.append('<a href="" class="clsVentanaCerrar" id="lightBoxCerrar">Cerrar</a>');

        //agregamos la capa de titulo a la ventana
        $objVentana.append($objVentanaTitulo);

        //creamos la capa que va a mostrar el contenido
        var $objVentanaContenido=$('<div class="clsVentanaContenido">');

        //agregamos un iframe y en el source colocamos la pagina que queremos cargar ;)
        $objVentanaContenido.append('<iframe src="'+strPagina+'">')

        //agregamos la capa de contenido a la ventana
        $objVentana.append($objVentanaContenido);

        //creamos el overlay con sus propiedades css y lo agregamos al body
        var $objOverlay=$('<div id="divOverlay">').css({
            opacity: .5,
            display: 'none'
        });
        $('body').append($objOverlay);

        //animamos el overlay y cuando su animacion termina seguimos con la ventana
        $objOverlay.fadeIn(function(){
            //agregamos la nueva ventana al body
            $('body').append($objVentana);
            //mostramos la ventana suavemente ;)
            $objVentana.fadeIn();
        })
    });
});

And the CSS:

/* estilos del overlay */
#divOverlay{
    position: fixed;
    background: #000;
    height: 100%;
    width: 100%;
    z-index: 99998;
    display: none;
    top: 0;
    left: 0;
}

.clsBoton{
    padding: 7px;
    background: #000;
    display: inline-block;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 0 10px #f1f1f1;
    border: solid 1px #000;
}
    .clsBoton:hover{
        background: #fff;
        color: #000;
        border-color: #000;
    }

/* clases relacionadas con la ventana modal */
.clsVentana{
    width: 100%;
    max-width:850px;
    min-width:500px;
    height: 600px;
    border: solid 1px #ccc;
    position: absolute;
    top: 10%;
    left: 50%;
    margin-left: -425px;
    border-radius: 3px;
    box-shadow: 0 0 15px #999;
    background: #fff;
    z-index: 99999;
    display: none;
}
    .clsVentanaTitulo{
        background: #222;
        color: #fff;
        border-radius: 3px 3px 0 0;
        display: block;
    }
        .clsVentanaTitulo strong{
            display: inline-block;
            padding: 10px;
        }
        .clsVentanaTitulo a{
            /*float: right;*/
            display: inline-block;
            color: #fff;
            text-decoration: none;
            background: #000;
            padding: 5px;
            margin: 5px;
            margin-left: 700px;
            border-radius: 3px;
            cursor: pointer;
        }
            .clsVentanaTitulo a:hover{
                background: #fff;
                color: #000;
            }
    .clsVentanaContenido{
        padding: 10px;
        height: 546px;
        overflow: auto;
        border-radius: 0 0 3px 3px;
    }
        .clsVentanaContenido iframe{
            width: 825px;
            height: 540px;
            border-radius: 3px;
            border: solid 1px #f1f1f1;
        }