201506171620jQuery + css + dialog 載入網頁後自動跳出介紹頁面

彈跳視窗 ... 一個曾經大家痛惡的功能,每載入網頁就跳出來說廢話,最後連瀏覽器都一起跳出來阻擋與對抗,現在幾乎沒人在用了。這麼討厭的東西,總會有長官想要在網頁上有這個功能,既然有需求那就來試試看囉!

傳統的彈跳視窗 - 網頁一載入即出現彈跳視窗,所以要在 body 的標籤增加 onload 事件去呼叫 CheckAlert() 函示

<body onload="CheckAlert()">
<script>
function CheckAlert() {
    alert("Page is loaded.");
}
</script>

 

底下簡單列出 Javascript 事件觸發的時機點,詳細可以參考 http://www.w3schools.com/js/js_htmldom_events.asp 

 

Event 名稱

說明

onclick

當使用者點擊觸發某物件時,例如按鈕 button

onchange

當元件內容改變時,例如下拉式選單或是 Text 輸入文字。

onblur

當游標失去焦點時,也就是點選其他區域時,通常用於填完表單的一個欄位。

ondblclick

Double Click. 使用者針對某物件連兩下。

onfocus

當類似 Text 輸入框被點選時,也就是物件被選取的時候。

onload

當物件被載入完成後立即觸發的動作,例如在 body img 物件內使用。

onmousedown

物件當滑鼠按鍵被按下的時候。

onmouseover

當滑鼠游標移動到某個物件時,例如滑鼠移動到某張圖片,進而施行換圖的動作,就用此事件。。

onmousemove

滑鼠游標移動時。

onmouseout

當滑鼠移開某個物件的時候觸發。

onmouseup

onmousedown 是按下滑鼠時觸發,onmouseup是放開點擊滑鼠的時候觸發。

onunload

離開此網頁的時候觸發,可以用來確定使用者是否真的要離開。

 

------

前面說過,基本的 javascript 彈跳視窗都會被瀏覽器所阻擋,除非你特別將某些站列入到允許清單中。

山不轉路轉,有這樣的需求就會有解決方案出來,現在各大網站又開始出現這種擾人的彈跳視窗了,對IT人來說,別人可以做~我們也要能達成.....


------------------------------------

底下將使用 jquery + css 給套用出 彈跳視窗或對話框 dialog 的功能。
jQuery 本身就有提供對話框 Dialog 的功能,請參考:https://jqueryui.com/dialog/ 

既然要用就要套一些比較好看、效果比較好的對話框,我所使用的是「http://zurb.com/playground/reveal-modal-plugin 」,除了載入基本的 jquery-1.6.min.js 他還載入 reveal.js 跟 reveal.css ,並且利用 a anchor 來達成觸發的動作,所以你只需要先將 reveal.js 跟 reveal.css 放到你的網站,然後道要使用此功能的那頁去插入底下這段程式碼就OK了

下載點:http://zurb.com/playground/uploads/upload/upload/122/reveal.zip 
插入所需載入的程式碼

<link rel="stylesheet" href="reveal.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="reveal.js"></script>
<a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade"> Fade 效果觸發點 </a>
<div class="reveal-modal" id="myModal">
     <h1>藍眼淚拍照</h1>
      <p>行程:.....<br />
      <a href="http://www.nthu.edu.tw"><img src="http://udn.com/blue_tear.jpg" /></a><br /><br />
       對沒來....。</p>
      <a class="close-reveal-modal">&times;</a>
</div>


當使用者點擊到「Fade 效果觸發點」,就會跳出如下圖的效果,你可以在 DIV 的區塊裡,任意的修改你要呈現的內容

點擊觸發是一種方式,我前面也說過幾種 javascript 的觸發時間點,各位可以輕鬆的更換觸發點。
如果你想要網頁一載入,就自動跳出這個畫面,請再增加底下這段程式碼就可以達成。

<script type="text/javascript">
  $(document).ready(function() {
      $('#myModal').reveal();
   });
</script>

他是當本網頁 document 載入完成後,呼叫 function() 直接執行 $('#myModal').reveal(); 事件,其  #myModal 必須對應前面的「id="myModal"」然後去呼叫定義在 reveal.js 裡頭的 reveal() 函示,來達成此呈現的效果。

 ---- 20150701 -----------------------------

如果想要修改呈現的大小及位置,需要修改對應的「reveal.css」。
在「.reveal-modal-bg」區塊修改背景色及透明度,當中 rgba 的 204 可以用 0-255 或 0-100% 方式表示,後面的 0.4 代表 transparent 透明度的程度。
background: rgba(204,204,204,.4);
也可以用
background-color: rgba(255,0,255,0.6);

~End 

回應
Google Search
Google
累積 | 今日
loading......
平均分數:0 顆星
投票人數:0
我要評分:
Google