Per un progetto recente incorporato FancyBox e nel complesso ne sono felice. Un amico mi ha consigliato di guardare il plugin modale jQuery come parte del framework Bootstrap di Twitter. Qualcuno ha usato questo plugin e può commentare? Qualsiasi pro, contro?FancyBox vs TwitterBootstrap modal?
Beh, per i professionisti dovrei dire che dal momento che è già incluso nel bootstrap, è possibile mantenere uno stile coerente in tutto il sito senza la necessità di modifiche pesanti o del tutto assenti. Il plug-in modale bootstrap sfrutta le transizioni CSS3 per fornire gli effetti e quindi aggiunge e potenziamento extra nelle prestazioni, insieme alle sue ridotte dimensioni è una soluzione molto rapida. Il modal bootstrap è indolore da usare ed è ben documentato per non perderti.
Quali sono gli svantaggi? Beh, non hai il controllo sulla larghezza e il posizionamento del modale, poiché è posizionato con CSS all'interno di un contenitore fisso, dovresti modificare il css per adattarlo alle tue esigenze, questo può diventare brutto quando hai bisogno di più dimensioni diverse modali da caricare nella tua pagina. Non puoi centrare verticalmente/orizzontalmente il modale sullo schermo senza l'uso di pesanti modifiche a js o css. Non è possibile caricare facilmente altri media come iframe/video/immagini senza ancora aver bisogno di hack o cosa no. Ho accennato prima agli ulteriori vantaggi e alle prestazioni degli stivali che il modal bootstrap porta usando le transizioni CSS3 per gli effetti, bene questa è un'arma a doppio taglio poiché i browser più vecchi non supportano questi metodi e quindi non hanno effetti di presentazione. Per quanto riguarda gli effetti, ce n'è solo uno per ora, che è un effetto di dissolvenza diapositiva, quindi non ci sono troppe scelte lì (non è un grosso problema, ma ho pensato di annotarlo).
Vorrei andare con fancybox, più bang per il vostro buck, il plug-in modale bootstrap è ancora molto per i giovani e nelle prossime uscite si occuperà del resto.
Pro per fancybox:
Pro per bootstrap:
Forse bootstrap è cambiato in modo significativo dal maggio, invece, da quando sono ad usarlo da August del 2012, posso dire la maggior parte di quello che ha detto Andres llich sul fatto che sia difficile controllare la larghezza/altezza/centraggio il modale è andato via o, più probabilmente, non ha capito molto bene il CSS.Il contenitore è uno si specifica, può avere un ID, e qualunque CSS da "override" è semplice come specificando l'ID poi la classe appropriata, ad esempio:
#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;
}
che rende il nostro modale città 334px di larghezza e centrato orizzontalmente. Potremmo centrarlo verticalmente con la stessa facilità, ma questa casella particolare è reattiva (80%) all'altezza del client e sarà sempre più grande della loro altezza di visualizzazione (per tutti i campioni di "sempre" inferiore a 8+ 30 "monitor retina impilati in verticale o in meno).
ho provato il codice e che non funzionano. Potresti fare un esempio in jsfiddle? – Philip007
Ecco un rapido jsfiddle: http://jsfiddle.net/E5pjU/ Ho aggiornato alcuni stili per la versione 3 di bootstrap che non erano necessari anche per la versione 2. –
mi piacerebbe esprimere un voto qui per Bootstrap. Con Bootstrap 3, ci sono alcune caratteristiche che rispondono, e ho fatto un POC per vedere come avrei potuto personalizzare la larghezza fissa del modal predefinita Bootstrap. funziona davvero bene, per qualsiasi dimensione dei contenuti.
http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/
Inoltre, non c'è bisogno di tenere le barre del titolo e dei pulsanti. Come vedrete in questo video lynda.com (disponibile a subsc ribers), omettendoli si può ottenere un bel comportamento dello zoom fotografico a schermo intero.
http://www.lynda.com/course20/Bootstrap-tutorials/Updating-modals/138156/144536-4.html
grazie, congettura che lo riassume –