作者 主題: 固定式浮動客服按鈕、視窗  (閱讀 4726 次)

0 會員 與 1 訪客 正在閱讀本文。

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
固定式浮動客服按鈕、視窗
« 於: 七月 25, 2011, 01:04:53 下午 »
既然浮動,又為何要固定?你會有這個疑問也是正常的,因為實在不知要用什麼標題形容這個功能原本使用浮動視窗的時候,浮動視窗都會隨著頁面的捲動而上下震盪,有時還會因為連線問題而卡住,但是以下介紹的功能,不管你視窗如何捲動,浮動視窗都會一直固定在那裡,動都不敢動一下,設定方法也極為簡單,任何類型的網站都能使用,因此以下步驟只是方法,請大家自行運用。演示請看本站左上角的客服圖片:
1、在你的CSS(樣式表)的最後加上:

代碼: [選擇]
#toolbar-box {
_display:none;
position:fixed;
bottom:5px;
right:0px;
width:200px;
right:0px;
height:61px;
z-index:1000000;
background-color: transparent;
}
bottom:5px;
right:0px;
是指定浮動視窗的位置top(上)、bottom(下)、left(左)、right(右)
要靠左上就用:
top:5px;
left:0px;
2、下載「toolbar.js」,儲存在根目錄的js資料夾內(如果沒有js資料夾就自己新增),

3、將底下程式碼改為實際內容,放在網頁或模板的</html>之後(就是網頁的最後):
代碼: [選擇]
<script type="text/javascript" src="http://你的網址/js/toolbar.js"></script>
<div id="toolbar-box">
浮動視窗內的程式碼...
</div>
完成
LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php

離線 qaw3388

  • VIP會員
  • 正式會員
  • ******
  • 積分 +0/-0
Re: 固定式浮動客服按鈕、視窗
« 回覆 #1 於: 九月 14, 2012, 02:20:18 下午 »
我想要商城內每個網頁都能看到 浮動訊息,
請問要在哪個檔案加上這個程式碼?
<script type="text/javascript" src="http://你的網址/js/toolbar.js"></script>
<div id="toolbar-box">
浮動視窗內的程式碼...
</div>

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
Re: 固定式浮動客服按鈕、視窗
« 回覆 #2 於: 九月 14, 2012, 05:28:14 下午 »
page_footer.lbi
就可以
LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php

離線 qaw3388

  • VIP會員
  • 正式會員
  • ******
  • 積分 +0/-0
Re: 固定式浮動客服按鈕、視窗
« 回覆 #3 於: 九月 15, 2012, 11:56:54 下午 »
已解決,感恩!!

離線 alanlin

  • VIP會員
  • 正式會員
  • ******
  • 積分 +0/-0
Re:固定式浮動客服按鈕、視窗
« 回覆 #4 於: 十一月 04, 2013, 05:44:31 下午 »
andy:我照你說的步驟方法,結果網頁只顯示"浮動視窗內的程式碼"
我的網址:www.dolemi.com.tw,不知道問題出在哪裡ㄝ

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
Re:固定式浮動客服按鈕、視窗
« 回覆 #5 於: 十一月 04, 2013, 06:11:49 下午 »
把【浮動視窗內的程式碼】改成你要顯示的內容
背景顏色不可省略...
LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php

離線 alanlin

  • VIP會員
  • 正式會員
  • ******
  • 積分 +0/-0
Re:固定式浮動客服按鈕、視窗
« 回覆 #6 於: 十一月 04, 2013, 06:34:56 下午 »
請問andy有公版的樣式程式碼可以提供嗎?小弟真的是不懂程式語言,只會剪剪貼貼而已,,

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
Re:固定式浮動客服按鈕、視窗
« 回覆 #7 於: 十一月 04, 2013, 06:54:29 下午 »
就把那些字換成你要顯示的內容
哪需要程式語言!
LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php