jQuery的模態的形式發佈

Question

問候

我想用基於動態地生成AJAX和形式jQuery模態庫爲模式，以顯示和提交。我已經將jquery ui用於其他目的，但是我不確定jQuery UI對話框是否是通過ajax獲取項目列表並生成要發佈的表單來顯示此類數據的好方法。

如果不是，你會推薦什麼樣的模式庫用於我的任務？

問候。

Answer 1

Fancybox

非常動態的，只是真棒！

Answer 2

還嘗試jquery facebox

Facebox是一個基於jQuery的，臉譜式收藏夾，其可以顯示圖像，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; 
     }