Magnific Popup 是一款免費的響應式 jQuery Lightbox 插件，兼容 Zepto.js。
Magnific Popup是一款非常優秀的相應式插件，不僅在桌機上表現優秀，在行動裝置上也有良好的兼容性。其適用範圍包括：lightbox 式圖片瀏覽、 iframe 對話框、 css 內文對話框、ajax 異步載入等功能。
Magnific Popup 的基礎用法
Magnific Popup 的引用
引用 JS 與 css 樣式
1 | <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css'> |
1 2 3 4 | <!-- jQuery 1.7.2+ or Zepto.js 1.0+ --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- Magnific Popup core JS file --> <script src='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js'></script> |
如果已經導入 jQuery.js，就不用再次包含它。
1 | jQuery.noConflict(); |
初始化 popup（彈出窗口）
Popup 的初始化代碼應該在 document（文檔）ready之後執行
1 2 3 | $(document).ready(function() { $('.image-link').magnificPopup({type:'image'}); }); |
三種方法可以調用一個 magnific-popup
通過一個HTML元素
1 | <a class="test-popup-link" href="path-to-image.jpg">Open popup</a> |
1 2 3 4 | $('.test-popup-link').magnificPopup({ type: 'image' // other options }); |
type 要被顯示的選項，以指定的內容的格式
通過一組有共同父元素的子元素
和之前的一樣，不同的是創建一個彈出列表。
注意，此方法不支持 gallery（畫廊）模式，它只不過減少了單擊事件處理函數的數量──每個元素以獨立的窗口彈出。如果你要使用 gallery 模式，添加 gallery:{enabled:true} 選項。
1 2 3 4 5 | <div class="parent-container"> <a href="path-to-image-1.jpg">Open popup 1</a> <a href="path-to-image-2.jpg">Open popup 2</a> <a href="path-to-image-3.jpg">Open popup 3</a> </div> |
1 2 3 4 5 | $('.parent-container').magnificPopup({ delegate: 'a', // child items selector, by clicking on it popup will open type: 'image' // other options }); |
通過「items」選項
items 選項為彈出項定義了一組數據，並且讓Magnific Popup忽略目標DOM元素的所有屬性值。items的值可以是單個對象或一個對象數組。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | // Example with single object $('#some-button').magnificPopup({ items: { src: 'path-to-image-1.jpg', }, type: 'image', // this is default type }); // Example with multiple objects $('#some-button').magnificPopup({ items: [ { src: 'path-to-image-1.jpg', }, { src: 'http://vimeo.com/123123', type: 'iframe', // this overrides default type }, { src: $('<div>Dynamically created element</div>'), // Dynamically created element type: 'inline', }, { src: '<div>HTML string</div>', type: 'inline', }, { src: '#my-popup', // CSS selector of an element on page that should be used as a popup type: 'inline', }, ], gallery: { enabled: true, }, type: 'image', // this is default type }); |
See the Pen Popup with mixed content types by Dmitry Semenov (@dimsemenov) on CodePen.
內容類型 (Content Types)
Magnific Popup 支援四種類型：image、iframe、inline和ajax。
由於並不存在基於URL的自動探測機制，所以可以手動定義。
可以通過兩種方式定義彈出窗口的類型：
- 使用類型(type)選項，例如： $('.image-link').magnificPopup({type:'image'})
- 使用 mfp-TYPE css class(TYPE是所需的內容類型) 例如： <a class="mfp-image image-link">Open image</a>, $('.image-link').magnificPopup()
See the Pen magnificPopup-inline-js陣列+物件巢狀式寫法自動產生於dom內 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
彈出窗口的類型可以通過兩種方式定義：
1 | $('.image-link').magnificPopup({type:'image'}) |
1 | <a class="mfp-image image-link">Open image</a>, $('.image-link').magnificPopup() |
其中，第二種方法會覆蓋第一種方法，因此你可以在一次調用定義多種類型的content type。
inline是預設的content type（從v0.8.4以來）。
有幾種方法可以定義彈出窗口的來源
（例如，一張圖片、一個 HTML 文檔，一個影片）
1 | <a href="image-for-popup.jpg">Open image</a> |
1 | <a href="some-image.jpg" data-mfp-src="image-for-popup.jpg">Open image</a> |
1 2 3 4 5 6 | $.magnificPopup.open({ items: { src: 'some-image.jpg' }, type: 'image' }); |
如果要修改源是如何解析，可以使用 elementParse 回調
1 2 3 4 5 6 7 8 9 10 11 12 | $('.image-link').magnificPopup({ type:'image', callbacks: { elementParse: function(item) { // Function will fire for each target element 功能將觸發對每個目標元素 // "item.el" is a target DOM element (if present) "item.el" 目標是DOM元素（如果存在） // "item.src" is a source that you may modify 你可以修 "item.src" 改來源 console.log(item); // Do whatever you want with "item" object 做你想做的以“項目”對象 } } }); |
圖像類型 (image)
必須將圖像的路徑設為主要源。如果彈出沒有一個圖像源，並且沒有不應該被預加載（和視網膜源化等 and retina-ized, etc.）的圖像，使用 inline 的類型。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | image: { markup: '<div class="mfp-figure">'+ '<div class="mfp-close"></div>'+ '<div class="mfp-img"></div>'+ '<div class="mfp-bottom-bar">'+ '<div class="mfp-title"></div>'+ '<div class="mfp-counter"></div>'+ '</div>'+ '</div>', // Popup HTML markup. `.mfp-img` div will be replaced with img tag, `.mfp-close` by close button cursor: 'mfp-zoom-out-cur', // Class that adds zoom cursor, will be added to body. Set to null to disable zoom out cursor. titleSrc: 'title', // Attribute of the target element that contains caption for the slide. // Or the function that should return the title. For example: // titleSrc: function(item) { // return item.el.attr('title') + '<small>by Marsel Van Oosten</small>'; // } verticalFit: true, // Fits image in area vertically tError: '<a href="%url%">The image</a> could not be loaded.' // Error message } |
請注意，Magnific Popup不會為圖像實現任何基於JavaScript的客戶端緩存。因此，請確保你的服務器增加了Expires頭使圖像不會每次下載。
iframe類型
Magnific Popup 每個服務只支持一種類型的 URL，以下預設三個服務。
1 2 3 4 5 6 | // YouTube "http://www.youtube.com/watch?v=7HKoqNJtMTQ" // Vimeo "http://vimeo.com/123123" // Google Maps "https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom" |
實作 iframe 類型 Youtube
主要指定相對在 Html 裡的 class name，就可以直接使用
- 一定要用主機 localhost 來run HTML，套件才可以使用此 iframe 類型功能。
- Youtube 直接輸入瀏覽器網址列 https://www.youtube.com/watch?v=影片id，例如：https://www.youtube.com/watch?v=xGrXISLgvec
- 資料來源：http://codepen.io/dimsemenov/pen/LEmaI
1 | <a class="popup-youtube" href="https://www.youtube.com/watch?v=xGrXISLgvec">Open YouTube video</a> |
1 2 3 4 5 | $(document).ready(function () { $('.popup-youtube').magnificPopup({ type: 'iframe', }); }); |
See the Pen youtube iframe for CSS 與共用 / Magnific Popup by Jimmy_Wu (@Jimmy_Wu) on CodePen.
實作 iframe 類型 Gmap
See the Pen Gmap iframe / Magnific Popup by Jimmy_Wu (@Jimmy_Wu) on CodePen.
直列式類型 (Inline Type)
直列式類型 (Inline Type) 需要以下設定。
1.HTML元素中創建顯示彈出窗口，並加到某處。.mfp-hide 頁面彈出需要先隱藏。
1 2 3 | <div id="test-popup" class="white-popup mfp-hide"> Popup content </div> |
2.直列式類型 (Inline Type)彈出窗口並不會自已加上樣式，所以需要指定樣式。預設會垂直居中alignTop:false 改成 true 就可以置頂，裡面自動附加關閉按鈕 closeBtnInside:true。
1 2 3 4 5 6 7 8 | .white-popup { position: relative; background: #FFF; padding: 20px; width: auto; max-width: 500px; margin: 20px auto; } |
3.添加按鈕，需對應相關的元素 CSS 與 id
1 2 3 4 5 | <!-- Like so: --> <a href="#test-popup" class="open-popup-link">Show inline popup</a> <!-- Or like so: --> <a href="mobile-friendly-page.html" data-mfp-src="#test-popup" class="open-popup-link">Show inline popup</a> |
4.初始化 JS
1 2 3 4 | $('.open-popup-link').magnificPopup({ type:'inline', midClick: true //使用 true 後點按按鈕不會置頂與無法直接另開新視窗，預設是false }); |
5.其他方式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | // From HTML string $('button').magnificPopup({ items: { src: '<div class="white-popup">Dynamically created popup</div>', type: 'inline', }, }); // From an element with ID #popup $('button').magnificPopup({ items: { src: '#popup', type: 'inline', }, }); // From jQuery object $('button').magnificPopup({ items: { src: $('<div class="white-popup">Dynamically created popup</div>'), type: 'inline', }, }); // Open directly via API $.magnificPopup.open({ items: { src: '<div class="white-popup">Dynamically created popup</div>', // can be a HTML string, jQuery object, or CSS selector type: 'inline', }, }); |
See the Pen 直列式類型 (Inline Type) / Magnific Popup by Jimmy_Wu (@Jimmy_Wu) on CodePen.
如果是使用行動裝置，而內容又過長的話在最下方要加上一個關閉按鈕才會比較方便。
1 2 3 4 5 6 7 8 9 10 11 12 | $(function () { $('.popup-modal').magnificPopup({ type: 'inline', preloader: false, focus: '#username', modal: true, }); $(document).on('click', '.popup-modal-dismiss', function (e) { e.preventDefault(); $.magnificPopup.close(); }); }); |
1 2 3 4 5 6 7 8 9 10 | <a class="popup-modal" href="#test-modal">Open modal</a> <div id="test-modal" class="white-popup-block mfp-hide"> <h1>Modal dialog</h1> <p> You won't be able to dismiss this by usual means (escape or click button), but you can close it programatically based on user choices or actions. </p> <p><a class="popup-modal-dismiss" href="#">Dismiss</a></p> </div> |
See the Pen 直列式類型 (Inline Type) 區塊內加關閉按鈕 / Magnific Popup by Jimmy_Wu (@Jimmy_Wu) on CodePen.
實際樣品演示
items 陣列相本 / Magnific Popup
See the Pen items 陣列相本 / Magnific Popup by Jimmy_Wu (@Jimmy_Wu) on CodePen.
Magnific Popup – items 陣列中使用不同類型
See the Pen items 陣列中使用不同類型 / Magnific Popup by Jimmy_Wu (@Jimmy_Wu) on CodePen.
進出場動畫(Animation)
See the Pen items 陣列相本進出動畫 / Magnific Popup by Jimmy_Wu (@Jimmy_Wu) on CodePen.
開啟視窗後直接彈出 / Magnific Popup
See the Pen 開啟視窗後直接彈出 / Magnific Popup by Jimmy_Wu (@Jimmy_Wu) on CodePen.
callbacks 使用 html dom iframe & image
See the Pen callbacks 使用html dom iframe & image / Magnific Popup by Jimmy_Wu (@Jimmy_Wu) on CodePen.
資料來源
Magnific Popup 官網
Magnific Popup 設定說明
響應式彈出層和對話框插件Magnific Popup
Magnific Popup響應式的jQuery光箱特效插件
Magnific Popup を使ってみる
インラインで画像とテキストを表示させる方法