JQuery Popup Plugins 介紹

大家在網路上可以找到許多的Plugin,但並不是每一個都符合我們的需求。

找到Plugin後,可以先依以下項目進行篩選,避免日後開發過程更加麻煩:

  1. 是否真的需要這項功能
  2. 說明文件是否清楚
  3. 有無持續更新
  4. 有無支援響應式網頁
  5. 有無支援行動裝置

 

 

今天跟大家介紹幾個自己覺得不錯的Popup Plugins

Vex

Vex 的動畫及樣式易於修改,也支援在行動裝置上使用,而且相當輕量,最近才剛發布新版本。

瀏覽器支援

  • IE 9+
  • Edge 13+
  • Firefox 21+
  • Chrome 23+
  • Safari 6+
  • Opera 15+

 

Vex的實作

 

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>.

 

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的實作

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>.

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)展示

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>.

 

除了上述幾個,還有很多好用的plugins,使用時可以多比較,讓開發過程更順利。