Question

问候

我想使用基于jquery的模态库来动态生成基于ajax的表单，并将表单作为模式来显示和提交。我已经将jquery ui用于其他目的但是我不确定jquery ui对话框是否是通过ajax获取项目列表并生成要发布的表单来显示此类数据的好方法。

如果没有，你会为我的任务推荐什么模态库？

问候。

Answer 1

Fancybox

非常有活力，而且真棒！

Answer 2

同时尝试jquery facebox

Facebox是一款基于jQuery的Facebook风格灯箱，可以显示图像，div或整个远程页面。

使用简单，易于使用。下载tarball，查看示例，然后开始享受曲线。

Answer 3

我发现ColorBox是最好的jQuery扩展。

Answer 4

看看这个：http://www.lewebmonster.com/ejemplos/ventanas-modales-con-jquery/

HTML：

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

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();
        })
    });
});

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;
        }

用于表单发布的Jquery模式

4 个答案: