Para un proyecto reciente, incorporé FancyBox y, en general, estoy contento con él. Un amigo me recomendó que mirara el plugin modal jQuery como parte del framework Bootstrap de Twitter. ¿Alguien ha usado este complemento y puede comentar? Cualquier pros, contras?FancyBox vs TwitterBootstrap modal?
Bueno para los profesionales, tendría que decir que, como ya está incluido en el programa de arranque, puede mantener un estilo uniforme en todo su sitio sin la necesidad de modificaciones importantes, o ninguna. El complemento modal bootstrap aprovecha las transiciones CSS3 para proporcionar los efectos y, por lo tanto, agrega un impulso adicional en el rendimiento, junto con su pequeño tamaño es una solución muy rápida. El modo bootstrap es fácil de usar y está bien documentado para que no te pierdas.
¿Cuáles son los inconvenientes? Bueno, no tienes control sobre el ancho y el posicionamiento del modal, ya que está posicionado con CSS dentro de un contenedor fijo, tendrías que modificar el CSS para adaptarlo a tus necesidades, esto puede ponerse feo cuando requieras múltiples tamaños diferentes. modales para cargar en tu página. No puede centrar vertical/horizontalmente el modal en la pantalla sin el uso de modificaciones pesadas a js o css. No puede cargar fácilmente otros medios como iframes/videos/images hasta el momento sin la necesidad de hacks o lo que no. Mencioné antes el beneficio agregado y las botas de rendimiento que trae el modo bootstrap mediante el uso de transiciones CSS3 para los efectos, bueno esto es un arma de doble filo ya que los navegadores más antiguos no admiten esos métodos y por lo tanto no tienen efectos de presentación. Hablando de los efectos, solo hay uno por ahora, que es un efecto de deslizamiento de fade así que no hay demasiadas opciones allí (no es un gran problema, pero pensé que lo noto).
Iré con fancybox, más por tu dinero, el complemento modal bootstrap todavía es muy joven y en futuras versiones se pondrá al día con el resto.
Pros: FancyBox para
Pros de arranque:
Quizás el bootstrap ha cambiado significativamente desde mayo, sin embargo, desde que lo uso desde agosto de 2012, puedo decir que la mayoría de lo que dijo Andrés fue difícil de controlar el ancho/alto/centrado de el modal se ha ido, o es más probable que simplemente no entienda CSS muy bien.El contenedor es uno que especifique, puede tener una identificación, y cualquier CSS que desea "anulación" es tan simple como que especifica el ID de entonces la clase apropiada, por ejemplo:
#citymodal {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 80%;
margin-left: -167px;
width: 334px;
padding-bottom: 40px;
min-height: 150px;
}
Eso hace que nuestro modal ciudad 334px de ancho y centrado horizontalmente Podríamos centrarlo verticalmente con la misma facilidad, pero esta caja particular es receptiva (80%) a la altura del cliente y siempre será más grande que su altura de visualización (para todas las muestras de "siempre" son menos de 8+ monitores de retina de 30 "apilados verticalmente o menos).
me trataron su código y que no funcionan. ¿Podría hacer un ejemplo en jsfiddle? – Philip007
He aquí un jsfiddle rápido: http://jsfiddle.net/E5pjU/ Actualicé algunos estilos para la versión 3 de bootstrap que tampoco eran necesarios para la versión 2. –
Puse un voto aquí para Bootstrap. Con Bootstrap 3, hay algunas características de respuesta agradables, e hice un POC para ver cómo podía personalizar el ancho fijo del modo predeterminado de Bootstrap. funciona muy bien, para cualquier tamaño de contenido.
http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/
también, usted no tiene que mantener a las barras de título y los botones. Como se verá en este video lynda.com (disponible a Subsc ribers), al omitirlos puede obtener un comportamiento bastante agradable de zoom de pantalla completa.
http://www.lynda.com/course20/Bootstrap-tutorials/Updating-modals/138156/144536-4.html
gracias, supongo que lo resume –