大家在網路上可以找到許多的Plugin,但並不是每一個都符合我們的需求。
找到Plugin後,可以先依以下項目進行篩選,避免日後開發過程更加麻煩:
- 是否真的需要這項功能
- 說明文件是否清楚
- 有無持續更新
- 有無支援響應式網頁
- 有無支援行動裝置
今天跟大家介紹幾個自己覺得不錯的Popup Plugins
Vex
Vex 的動畫及樣式易於修改,也支援在行動裝置上使用,而且相當輕量,最近才剛發布新版本。
瀏覽器支援
- IE 9+
- Edge 13+
- Firefox 21+
- Chrome 23+
- Safari 6+
- Opera 15+
Vex的實作
[codepen_embed height=”456″ theme_id=”0″ slug_hash=”PmqjQz” default_tab=”js,result” user=”LeonardoXu”]See the Pen <a href=’http://codepen.io/LeonardoXu/pen/PmqjQz/’>JS libraries – 2 – Vex.js – voorbeeld 1</a> by leo hsu (<a href=’http://codepen.io/LeonardoXu’>@LeonardoXu</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
SweetAlert
SweetAlert用來取代alert,內建多種平常會用到的樣版,警告、錯誤、登入、確認等等,
瀏覽器支援
- IE8: (Dropped since v1.0.0-beta)
- IE9: Works, but icons are not animated.
- IE10+: Works!
- Safari 4+: Works!
- Firefox 3+: Works!
- Chrome 14+: Works!
- Opera 15+: Works!
SweetAlert的實作
[codepen_embed height=”553″ theme_id=”0″ slug_hash=”MmwojO” default_tab=”js,result” user=”LeonardoXu”]See the Pen <a href=’http://codepen.io/LeonardoXu/pen/MmwojO/’>SweetAlert jQuery plugin example</a> by leo hsu (<a href=’http://codepen.io/LeonardoXu’>@LeonardoXu</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Magnific Popup
Magnific Popup 輕量快速,內建的樣板更多了,圖庫、影片、地圖、表單應有盡有,
瀏覽器支援
Desktop:
Chrome, Safari, FF, Opera, IE8+, partial support of IE7 (works, but some visual layout features, like vertical centering, are missing)
Mobile:
default browser in Android 2.3+, iOS5+, Blackberry 10+, WP7+, mobile Opera and Chrome on Android
下面是用Magnific Popup的動畫效果(CSS)展示
[codepen_embed height=”735″ theme_id=”0″ slug_hash=”wdaeOe” default_tab=”css,result” user=”LeonardoXu”]See the Pen <a href=’http://codepen.io/LeonardoXu/pen/wdaeOe/’>CSS3 animation effects for Magnific Popup</a> by leo hsu (<a href=’http://codepen.io/LeonardoXu’>@LeonardoXu</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
除了上述幾個,還有很多好用的plugins,使用時可以多比較,讓開發過程更順利。



