懸浮式對話方塊的註腳效果

之前社群有兩則註腳效果的分享 ( http://goo.gl/EOBzEM , http://goo.gl/nFz80P )，而這個 +Mark X 分享的註腳效果更漂亮，對話框會從天而降，而且有多自訂的選項，請見這篇的詳細教學： http://xox520.blogspot.com/2014/02/dialog-box-effects.html


Mark X
謝謝 +Wayne Fu 轉貼分享.
文中我沒有說明的部份, 使用探測屏幕的CSS, 可自適應各種裝置. 如果行動版有支援此項插件, 會方便許多.

面壁王澳西諾
哇哇~小燈泡!! 
感謝+Mark X  +Wayne Fu  立馬收起來找個時間好好來修改一下文章^^

Mark X
+面壁王澳西諾讀者專頁 多了個玩具 XD

面壁王澳西諾
我頭在痛了!!   搞了好久我照兩步驟做了怎麼沒看見小燈泡出來~_~

我實驗過在綠色可以修改的那邊貼入影片鑲嵌碼或是影片網址都不會出現耶!! 

然後在試驗了最簡單的只輸入文字，之後按預覽文章沒看見小燈泡! 難道要發布文章了才看的見!?

Mark X
+面壁王澳西諾讀者專頁 預覽就應該看得到按鈕.

面壁王澳西諾
我在預覽"曾經"看到一個黑底白字的圖標上面的白字寫著note 不知道是否這樣算成功? (小燈泡去哪了!??)

Mark X
您沒把文章看到底喔? 小燈泡要另外使用字型取代那個 NOTE 字樣.

面壁王澳西諾
有!我全看完了＠＠　我有看到你放那篇＂圖形自型＂的～我以為那個是額外補充解說的!

想說可能步驟二就已經把小燈泡包在裡面了XD

那我知道了~我再去改一下!  

Mark X
+面壁王澳西諾讀者專頁 那個才是小燈泡的真身. XD

使用圖形的內碼字也可以, 形狀沒那麼好看就是.

面壁王澳西諾
+Mark X 我下載了圖形對照表了! 也按照圖形文字的語法把步驟二裡面那個"note"取代掉了! 然後按預覽連按鈕都不見了><

另外我遇到一個問題，就是你文章裡面提到的"參數"是必要設定的嗎? 

小燈泡的語法我打<i class="fa fa-lightbulb-o"></i>  這樣是否有問題??

Mark X
+面壁王澳西諾讀者專頁 懶人包是預設值藍頂, 用不到參數. 進階版才會有橙區參數可修改. 不改它也沒關係, 就是藍色.
<i class="fa fa-lightbulb-o"></i> 取代 NOTE就可以. 預覽應該要看得到的.
沒有測試文章不知道哪裡有問題.

面壁王澳西諾
我截了圖你看看!
https://www.dropbox.com/s/7yu2xm1p37oql4n/%E6%96%87%E7%AB%A0%E8%A8%BB%E8%A7%A3%E5%9C%96%E7%89%87%E5%87%BA%E4%B8%8D%E4%BE%86.png

Mark X
+面壁王澳西諾讀者專頁  字型檔 font-awesome.min.css 那一段 link 錯放到 <script> 裡了, 被包夾住不會顯示樣式. 改放到 <b:skin><![CDATA[ 之上.

面壁王澳西諾
+Mark X  成功了! YA~~

謝謝你耐心地幫我除錯^^

面壁王澳西諾
我發現文章裡面的"關於HTML CONTENT"的應用說明裡面每一個舉例都不像是字面上看起來那麼簡單，除了文字跟連結之外!  

我剛就測試了HTML CONTENT裡面放影片的卻出現預覽看的見按鈕但是檢視該篇文章就又看不到按鈕的靈異現象。又陷入另外一個無止境的爬文找解答的循環裡@@

Mark X
+面壁王澳西諾讀者專頁 字型檔 link 不用放在開頭處, 起始位置最好讓給 meta tag 這類資訊標記.
如果圖形字使用頻率不是那麼高, 可以往下移, 和小燈泡的兩個插件檔一起放在 </body> 之上組成丸子三兄弟.

Mark X
+面壁王澳西諾讀者專頁 沒看到實際操作不知道靈異現象如何產生的? 或許是紅區上下兩個class值沒有正確配對.

面壁王澳西諾
我來調整看看!!

面壁王澳西諾
+Mark X 丸子三兄弟改好了! 但靈異現象仍然在! 所以我想可能跟妳說的紅區那個有關!! 
不過我納悶的是紅區是指哪一區@@?

Mark X
+面壁王澳西諾讀者專頁 您是使用懶人包還是進階版? 如果有測試文章比較容易找出癥結點. 像我就會留一篇空白文章當作測試用的文章, 有時候預覽是無法發覺實際會發生的問題.

面壁王澳西諾
+Mark X 我目前都還是用懶人包!  懶人包就狀況百出了我無法想像我用進階包會怎樣!?

我來另外發一個測試文章試試看~如果還有問題再把文章網址丟給你看看!! :)

+Mark X  好了我大致上測試完成了旦發現一個小問題!

我用懶人包只有在每一篇文章放一次! 所以文章在單篇檢視模式下會看到一個按鈕! 但是回到網誌首頁就會看到我兩篇測試文章各使用的圖圖形文字按鈕並排。 (可是點進去單篇文章就又回到各只有一個) 這樣是正常的嗎?

這是測試網誌: http://orsino5201.blogspot.tw

Mark X
+面壁王澳西諾讀者專頁 不正常. 首頁也算是同一頁面.
解決方式：
1. 運用此效果懶人版時, 需放到 "read more" 之後. 讓它們在首頁王不見王.
2. 學會使用進階版修改 class(紅區) 和 id(藍區). 由於進階版有些概念很難一次說明或使用範例解說, (很懶得詳解) 
您先看懂基本概念再修改進階版會容易些.
https://plus.google.com/112119001727065787186/posts/QWFSEWMdu3d

面壁王澳西諾
+Mark X 我看懂基本概念了!  再找機會來操刀進階版看看

Dialog effects 提示視窗 | Dream Talker

註解或提示資訊的懸浮式對話方塊 jQuery UI dialog box effects on website...