[jQuery元件] Fancybox 3使用備忘

Fancybox 3備忘

最近在修改舊網頁,將Fancybox 1.3升級到3.3.1,以下記錄版本間的異動差異。

引用

Fanycbox 3適用於jQuery 1.9.1+、jQuery 2+與jQuery 3+,以使用jQuery 3+為佳。

  • 使用CDN
 https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.1/jquery.fancybox.css  https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.1/jquery.fancybox.js 

 https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.1/jquery.fancybox.min.css  https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.1/jquery.fancybox.min.js 
 npm install @fancyapps/fancybox --save 

使用iframe開啟網頁的差異

以下是Fancybox 1.3的寫法:

       $.fancybox({         type: 'iframe',         modal: true,         width: '80%',         height: '80%',         'autoScale': true,         'transitionIn': 'fade',         'transitionOut': 'fade',         'href': '要使用的網頁?參數=參數值',         onClosed: callBackFunction       }); 

Fancybox 3的新寫法:

       $.fancybox.open({         type: 'iframe',         src: '要使用的網頁?參數=參數值',         opts: {           modal: true,           afterShow: function (instance, current) {             callBackFunction();           }         }       }); 

另一個Fancybox 3的範例:

 $.fancybox.open('

Hello!

You are awesome!

');

在開啟的網頁裡關閉自己的Fancybox 1.3寫法:

   $("#closeButton").click(function () {     parent.$.fancybox.close();   }); 

Fancybox 3寫法:

 $("#closeButton").click(function () {   parent.jQuery.fancybox.getInstance().close(); }   

注意事項

Fancybox 3隻要用就能產生開啟對話窗的效果,但href屬性一定要提供,例如:

        顯示項目    

相關連結

##


想在手機閱讀更多Javascript資訊?下載【香港矽谷】Android應用
分享到Facebook