Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

FancyBox vs TwitterBootstrap modal?

For a recent project incorporated FancyBox and overall am happy with it. A friend recommended I look at the jQuery modal plugin as part of Twitter's Bootstrap framework. Has anyone used this plugin and can comment? Any pros, cons?

like image 583
Bachalo Avatar asked May 01 '12 14:05

Bachalo


1 Answers

Well for pros i would have to say that since it is already included in the bootstrap you get to keep a consistent style throughout your site without the need for heavy modifications, or none at all. The bootstrap modal plugin takes advantage of CSS3 transitions to supply the effects and thus adds and extra boost in performance, coupled with its tiny size it is a very speedy solution. The bootstrap modal is painless to use and is well documented so you don't get lost.

What are the drawbacks? Well you have no control over the width and positioning of the modal, since it is positioned with CSS inside a fixed container you would have to modify the css in order to adapt it for your needs, this can get ugly when you require multiple different sized modals to load in your page. You can't vertically/horizontally center the modal on the screen without the use of heavy modifications to the js or css. You can't easily load any other media like iframes/videos/images as of yet without the need for hacks or what not. I mentioned before the added benefit and performance boots that the bootstrap modal brings by using CSS3 transitions for the effects, well this is a double edged sword since older browsers don't support those methods and thus have no presentation effects. Speaking about effects, there is only one for now, which is a slide-fade effect so not too many choices there (not a big deal but thought i note it).

I'd go with fancybox, more bang for your buck, the bootstrap modal plugin is still much to young and in future releases it will catch up to the rest.

like image 146
Andres Ilich Avatar answered Sep 29 '22 22:09

Andres Ilich