版面呈現 ▌自訂彈跳視窗語法

「自訂彈跳視窗」

• 精準溝通：可依裝置、來源、瀏覽行為設定不同內容，傳遞對的人

• 提升轉換率：快速導引用戶註冊、領券或下單，有效促進成交

• 操作彈性高：支援多種樣式與時機設定，靈活搭配行銷活動使用

✎ 重點拆解：

一、「自訂彈跳視窗」設定路徑

一、「自訂彈跳視窗」設定路徑

設定路徑：擴充 > HTML自訂語法區塊。

 二、「自訂彈跳視窗」語法

▪︎ 彈跳視窗文字內容

<div id="pop-welcome-content" style="display:none;">
<h2>Hello! 彈跳視窗</h2>
</div>
<script>
setTimeout(function(){
$.fancybox.open({
src : '#pop-welcome-content',
type : 'inline'
});
}, 1000);
</script>

\ 紅字部分放入，需彈跳的內容 /

▪︎ 彈跳視窗滿版圖片連結 

<style type="text/css">

  #pop-welcome-content{padding:0}

  /*去除圖片連結框線*/

  #pop-welcome-content a:focus{outline:none}

</style>

<div id="pop-welcome-content" style="display:none;"><a href="連結放這邊"><img onerror="imgError(this);" data-fr-src="圖片連結放這邊" src="圖片連結放這邊" /></a></div>

<script>

setTimeout(function(){

$.fancybox.open({

src : '#pop-welcome-content',

type : 'inline'

});

}, 1000);

</script>

\ 紅字部分放入，需放圖片連結 /

三、「自訂彈跳視窗」其他應用方式

▪︎ 未滿18歲警告視窗

＊可貼在需要的頁面裡

<style type="text/css">

  .fancybox-close-small {

    display:none;

  }

</style>

<div id="pop-welcome-content" style="display:none;">

  <h2>請注意 未滿18歲，不能購買！</h2>

  <a class="button" href="/">離開</a>

  <a class="button" data-fancybox-close href="javascript:;">我已滿18歲</a>

</div>

<script>

setTimeout(function(){

$.fancybox.open({

src : '#pop-welcome-content',

type : 'inline'

});

}, 1000);

</script>