[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('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');

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

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

Fancybox 3寫法:

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

注意事項

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

  
    顯示項目
  

相關連結

##

您可能也會有興趣的類似文章

簡睿

服務於軟體業的資訊老兵。興趣廣泛,學習力佳,樂於分享所知所學。

您可能也會喜歡…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *