Jquery модальных для вида проводки

Question

Привет

Я хотел бы использовать JQuery на основе библиотеки модальный для создания динамически на основе AJAX и форм как модальный для отображения и представить. Я уже использую jquery ui для других целей, но я не уверен, что если jquery ui-диалог является хорошим способом отображения таких данных, выбирая списки элементов через ajax и генерируя формы для публикации.

Если нет, то какую модульную библиотеку вы бы порекомендовали для моей задачи?

С уважением.

Answer 1

Fancybox

Очень динамичный, и это просто потрясающе!

Answer 2

попробовать Также jquery facebox

Facebox является JQuery основе, Facebook стиле Lightbox, который может отображать изображения, дивы, или целые удаленные страницы.

Он прост в использовании и удобен для глаз. Загрузите 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; 
     }