Dialog effects 提示視窗

11   Comments

對話視窗
一般寫文章時會將所有內容攤在陽光下, 一覽無遺. 這種直線式的文章對於閱讀者很方便; 寫作者更容易操作. 當需要對內文做註解或提供詳細資訊時, 直接寫在關聯段落中便顯得拖拖拉拉, 還可能中斷閱讀者的思緒.
偏偏我就習慣老人家碎碎念, 加個旁白或註解是常有的事情, 於是選擇了對話視窗當作解決之道. 首先了解 Dialog box 的基本用途: 提示 回應式確認資訊 附屬資訊
當然, 使用 jQuery 程式庫的網友也能夠運用 Dialog 提示效果, 不過每次寫文章需要編寫複雜的結構對我而言是不實用的, 所以我另外選擇 Bootstrap 編寫套用公式; 小燈泡註解效果就變得很容易附加在文章裡了. 喜歡這個效果者再繼續看如何使用.

先看看小燈泡效果是什麼? BootstrapDialog.show({title:' Information',message:'這就是小燈泡提示效果',buttons:[{id:'btn-1',label:' OK',cssClass:'btn-primary',action:function(dialogRef){dialogRef.close()}}]});
教學的第一段是懶人包的使用方法. 適用於在文章頁面中只使用一次, 懶得修改太多細節的人, 直接套用公式即可.

Step 1. 打開 CSS 範本, 將以下插件安裝至 </body> 上方.

<link href='https://googledrive.com/host/0B670PZGlLRSXa2M5RWNKWW1aYkE/dialog-box.css'
rel='stylesheet'/>
<script src='https://googledrive.com/host/0B670PZGlLRSXa2M5RWNKWW1aYkE/dialog-box.js'/>

Step 2. 使用在文章時, 切換成 HTML 編輯模式, 將以下公式轉貼到顯示位置.

<!-- DIALOG START -->
<span class="tips-code none">BootstrapDialog.show({title:'Information',message:'HTML Content',buttons:[{id:'btn-ok',label:'OK',cssClass:'btn-primary',action:function(dialogRef){dialogRef.close()}}]});</span>
<script>$(function(){$('.tips-code').each(function(index){var $section = $(this);var code = $(this).html().replace('<!--', '').replace('-->', ''); if($section.hasClass('none')){var $button = $('<button class="btn btn-primary">NOTE</button>');$button.on('click', {code: code}, function(event){eval(event.data.code);});$button.insertAfter($section);}});});
</script>
<!-- END -->

修改綠區:HTML Content 將此文字修改成您的註解內容即完成.
細心的您如果注意到綠區不僅是使用純文字內容; 而是 HTML 內文, 表示裡面可以放的東西可多了! 列舉幾項常用的物件:
文字或連結
圖片, 當作說明圖解. 已設定為自動縮放樣式, 通常圖解無須大圖面, 如必須使用大圖面請參考使用燈箱效果:Lightbox 燈箱效果 不影響提示視窗效果.
影片或內嵌微型網頁. 使用影片當作說明物件是目前網站設計的趨勢. var types=[BootstrapDialog.TYPE_INFO];$.each(types,function(index,type){BootstrapDialog.show({type:type,title:' Video',message:'
',buttons:[{id:'btn-2',label:' OK',cssClass:'btn-primary',action:function(dialogRef){dialogRef.close()}}]});});

會員表單. 例如網站正在做促銷, 利用查詢按鍵可連結表單資料, 而無須另開視窗或跳出視窗, 避免先前填了一堆資料卻因為跳出網頁又要重複填寫一次.
這個效果本體亦是按鈕, 大部分按鈕可作到的, 小燈泡也有相同功能.


進階修改:適合多次使用此功能, 或顏色區分註解內容者.
完成 Step 1 之後, 於 Step 2 內嵌以下程式碼. 安插到範本內或工具模組亦可.

<!-- DIALOG START -->
<div class="tips-code none">
var types = [ BootstrapDialog.TYPE_PRIMARY ];
 $.each(types, function(index, type){
 BootstrapDialog.show({
 type: type,
 title: 'Information',
 message: 'HTML Content',
 buttons: [{
 id: 'btn-ok',
 label: 'OK',
 cssClass: 'btn-primary',
 action: function(dialogRef){
 dialogRef.close();
 }
 }]
 });
 });
</div>

<script>$(function(){
 $('.tips-code').each(function(index){
 var $section = $(this);
 var code = $(this).html().replace('<!--', '').replace('-->', '');
 if($section.hasClass('none')){
 var $button = $('<button class="btn btn-primary">Check here</button>');
 $button.on('click', {code: code}, function(event){
 eval(event.data.code);
 });
 $button.insertAfter($section);
 }
 });
});
</script>
<!-- END -->

修改各區的數值, 對應位置參考圖:

jquery dialog box

紅區:不同的提示視窗使用不同的 class值做區別, Ex: Tips-A、Tips-B、Tips-C...
橙區:修改此處參數, 以顏色做類別區分.
黃區:title 提示的主標題, 依照目的、內容做修改.
綠區:使用 HTML 標記, 修改重點如上段所述. 純文字則依據網頁樣式顯示.
藍區:id 請使用不同命名區別, Ex: btn-1、btn-2、btn-3...
紫區:關閉(確認)按鈕的名稱.
棕區:開啟按鈕的名稱, 即小燈泡.

註解內容可顯示於搜尋結果中(包括影音媒體), 不會有好內容做白工的遺憾.
至於小燈泡怎麼來的? 可使用內碼選字或是使用 圖形字型 .


Author Summary
Dialog effects 提示視窗
Subject : Dialog effects 提示視窗
Author : - Dream Talker Updated at: 1:41 AM
Votes : 100% - 5.0 - based on 2015
註解或提示資訊的懸浮式對話方塊 jQuery UI dialog box effects on website
5 Stars - Reviews
留言提示 - Comment Tips
◆ 如果您有任何想法或意見,歡迎參與留言。
◆ Disqus匿名留言,信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言,可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵,留言須使用『@Mark X』在訊息中,以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. 這個特效我上次就想問了,感覺有點小複雜 ^_<

    ReplyDelete
    Replies
    1. 第一次測試成功後, 以後使用只需套公式會感覺很簡單的. 我習慣文章完成後再把註解的部份擷取成為綠區的內容, 最後才插入這個註解效果, 可以省下編輯的時間.

      Delete
  2. 昨天嘗試懶人包成功了! 但是只能用一次不是很可惜嘛?

    ReplyDelete
    Replies
    1. 每篇文章頁面用一次也很夠本了, 如果在同一文章要同時使用兩個以上的註腳, 那就試著修改進階版, 不會很難的; 成功了一次就有經驗了.

      Delete
  3. 太好了! 我喜歡這小燈泡的設計。
    我找時間安裝,有疑問再請教你,先謝了!

    ReplyDelete
    Replies
    1. 有問題再留言提問, 不用客氣. :)

      Delete
  4. David 王6:36 AM

    我又來提問了!
    請問需不需要加入 bootstrap.min.js 的程式碼,像 jquery 一樣用法?我按下 button 沒有彈出視窗。但有時又可以,是不是輸入的 content 有限制?

    ReplyDelete
    Replies
    1. 只要是正確使用 HTML 應該會顯示,而不是有時顯示有時不能。也許是您在 HTML content 裡面使用了 Enter 分行卻沒有正確使用 br 或 p 標籤。我寫了一個 Demo 寄到信箱,您自己嘗試修改就知道哪裡寫錯了。

      Delete
    2. 啊!忘了回復:不需要加入 bootstrap.min.js 的程式碼。我在 js 已經簡化程式碼只留必要部份,除非您原本需要該函式庫作其他效果。

      Delete
  5. 阿健11:22 PM

    請問文章連結類似霓虹閃光的效果如何作?我利用內部搜尋不到資料,謝謝。

    ReplyDelete
    Replies
    1. 喔!這是 -webkit-text-fill-color 加上 jQuery 效果,由於該 CSS 元素「text-fill-color」僅限部份 webkit 核心可辨識,並未納入 CSS3 當中。所以在 CSS4 規範正式納入之前,它不實用於網頁設計當中。

      Delete