Magnific Popup 是一個非常優秀的彈出對話框或者燈箱效果插件。它基於jQuery（zepto）開發，使用非常簡單，特點就是：非常好用。
官網地址： http://dimsemenov.com/plugins/magnific-popup/
Github地址：https://github.com/dimsemenov/Magnific-Popup
先看個效果吧：
快速入門demo
先做一個簡單的，把一個div彈出來的效果。
第一步： 添加腳本支持
<!-- Magnific Popup core CSS file --> <link rel="stylesheet" href="magnific-popup/magnific-popup.css"> <!-- 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="magnific-popup/jquery.magnific-popup.js"></script> 第二步： 添加html標簽
<!-- 添加一個a標簽，設置href屬性指向一個要彈出來的一個div盒子。 --> <a href="#pop" class="button is-large has-text-primary" id="btn">添加</a> <!-- 以下就是要彈出來的層，注意：添加mfp-hide先進行隱藏起來。 --> <div id="pop" class="mfp-hide"> <lable for="sname">用戶名</lable><input type="text" id="sname" name="ss" value=""> <hr> <input type="button" value="關閉" id="btnClose"> </div> 第三步： 給彈出來的層添加點樣式
#pop { position: relative; background: #FFF; padding: 20px; width: auto; max-width: 500px; margin: 20px auto; } 第四步： 初始化彈出來的層和a標簽的點擊事件。
// 給超級連接添加magnificPopup初始化方法。 $('#btn').magnificPopup({ type: 'inline', // 行內的類型，類比圖片的模式 closeBtnInside: true, // 顯示關閉按鈕 closeOnBgClick: false // 點擊遮罩透明背景關閉彈出層 }); magnificPopup方法的選項設置
- mainClass： String類型，要添加到根元素上的樣式類。默認是空字符串。
- closeOnContentClick： Boolean類型，默認false，點擊內容區域關閉彈出層。
- closeOnBgClick： Boolean類型，默認true，點擊背景區域關閉彈出層。
- closeBtnInside： Boolean類型，默認true，是否有內置的關閉按鈕。
- modal： Boolean類型，默認false，是否是模態對話框。
常用的其他api
- 關閉圖層close方法：
$.fn.magnificPopup('close'); - 打開彈出層open方法：
$.fn.magnificPopup('open') - 下一個圖片next方法：
$('.element-with-popup').magnificPopup('next');
其他方法：$.fn.magnificPopup('methodName' /*, param1, param2 ... */)
其他demo
- 圖片demo
<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> <script> $('.parent-container').magnificPopup({ delegate: 'a', // child items selector, by clicking on it popup will open type: 'image' // other options }); </script> - 圖片demo2
<div class="html-code grid-of-images"> <div class="popup-gallery"> <a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner"><img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75" /></a> <a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"><img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75" /></a> <a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg" title="The Uninvited Guest"><img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" width="75" height="75" /></a> <a href="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_b.jpg" title="Oh no, not again!"><img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" width="75" height="75" /></a> <a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" title="Swan Lake"><img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" width="75" height="75" /></a> <a href="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_b.jpg" title="The Shake"><img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" width="75" height="75" /></a> <a href="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" title="Who's that, mommy?"><img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" width="75" height="75" /></a> </div> </div> <script type="text/javascript"> $(document).ready(function() { $('.popup-gallery').magnificPopup({ delegate: 'a', type: 'image', tLoading: 'Loading image #%curr%...', mainClass: 'mfp-img-mobile', gallery: { enabled: true, navigateByImgClick: true, preload: [0,1] // Will preload 0 - before current, and 1 after the current image }, image: { tError: '<a href="%url%">The image #%curr%</a> could not be loaded.', titleSrc: function(item) { return item.el.attr('title') + '<small>by Marsel Van Oosten</small>'; } } }); }); </script> </div> 總結
這個插件還是非常好用的，使用簡單方便，而且api也都很人性化。壓縮后的js才20k，也算很小，lightbox效果也很棒。你值得擁有。