幫網站加入浮動問卷視窗-程式碼與解說

圖.1 本網站目前的浮動視窗

這次嘗試自製一個網頁底端的浮動視窗，其實已經上線好一陣子了，有些讀者可能有注意到，就在想或許有些讀者對於語法有興趣，所以這篇文章會放上原始碼跟簡單說明。

會想要做這個視窗的原因有兩個。一是受到一些網站的啟發，有些網站會在讀者滾動頁面快到底端時出現浮動視窗，可能做訂閱的或是文章推薦；第二點是我也的確有個小需求需要用到這個小視窗，那就是請讀者填問卷。

但我認為這種小視窗出現的太積極會打擾到讀者，所以我的設計是在滾軸滾到最底部時才出現浮動視窗。當然也是考量到一點：既然希望讀者幫我填網站的「使用經驗問卷」，那沒有把文章完整看完滾到最底部的話，可能對網站的設計也比較不熟悉。當然這種視窗也可以用做其他用途，只要把裡面的文字、連結置換，馬上又可以變成其他功能的視窗了。接下來就來看看程式碼。(強烈建議在修改blogger範本前事先備份範本)

一、載入jQuery

在<head>跟</head>之間填入下面程式碼，如果網站已經有載入lazyload之類的函式庫，建議可以把語法貼在一起，比較方便管理。另外建議之前就有載入過jQuery函式庫的把它換成下面的新版，效果支援度會比較高。

	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>

view raw onload-jquery hosted with ❤ by GitHub

二、HTML程式碼

在</body>前填入下面程式碼，第5行的文字請依自己的需求填入文字，第7行的問卷網址請置換成自己的網址。第1、2、9行是blogger判斷式，目的是讓效果在行動版範本不要出現。

	<b:if cond='data:blog.isMobile'>
	<b:else/>
	<div id="popup">
	<span class="cross">X</span>
	<p style="padding-left: 5px;line-height: 200%">簡單文字說明，依自己需求寫入任意文字</p>
	<span class="closebutton">取消</span>
	<span class="goquestion" ><a href="javascript: void(window.open('問卷網址'.concat(encodeURIComponent(document.title)) .concat(' ') .concat(encodeURIComponent(location.href)),'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=650,width=700'));">填問卷去</a></span>
	</div>
	</b:if>

view raw pop-up-html hosted with ❤ by GitHub

三、CSS程式碼

在<head>跟</head>之間填入下面程式碼

	<style type='text/css'>
	<!--
	#popup{ /* 浮動視窗的css語法 */
	font-size: 16px;
	display: none;
	background-color: #fffacd;
	width: 220px;
	padding: 15px 15px;
	left: 45px;
	bottom: 30px;
	position: fixed;
	z-index: 2;
	-moz-box-shadow: -2px 3px 25px #a9a9a9;
	-webkit-box-shadow: -2px 3px 25px #a9a9a9;
	box-shadow: -2px 3px 25px #a9a9a9;
	}

	.cross{ /* 浮動視窗的叉叉鍵 */
	background-color: #fff;
	margin-top:5px;
	margin-right:5px;
	margin-left:210px;
	padding: 4px;
	cursor: pointer;
	}

	.cross:hover{ /* 滑鼠移到叉叉鍵的效果 */
	background-color: #dcdcdc;
	}

	.closebutton { /* 浮動視窗的取消鍵 */
	display: inline-block;
	background: #ffffff;
	margin-left: 5px;
	padding: 6px;
	font-size: 18px;
	letter-spacing: 0.1em;
	cursor: pointer;
	}

	.closebutton:hover{ /* 滑鼠移到取消鍵的效果 */
	background-color: #dcdcdc;
	}

	.goquestion{ /* 浮動視窗的填答鍵 */
	display: inline-block;
	background-color: #9fc5e8;
	margin-left: 55px;
	padding: 6px;
	font-size: 18px;
	letter-spacing: 0.2em;
	font-weight: bold;
	cursor: pointer;
	float: right;
	}

	.goquestion:hover{ /* 滑鼠移到填答鍵的效果 */
	background-color: #6699cc;
	}

	.goquestion a:link { /* 填答鍵的連結 */
	color: #FFF;
	text-decoration: none;
	}

	-->
	</style>

view raw pop-up-css hosted with ❤ by GitHub

四、jQuery程式碼

要讓視窗出現跟消失需要用到jQuery語法，一樣在<head>跟</head>間填入下面程式碼。

	<script type='text/javascript'> // 網頁底端浮動視窗的js語法
	$(function(){
	$(window).scroll(function() {
	if($(document).scrollTop() + $(window).height() >= $(document.body).height()) {
	$("#popup").fadeIn('slow')
	}
	else if( $(document).scrollTop() < 400) {
	$("#popup").fadeOut('slow')
	}
	});
	$(".cross").click(function(){
	$("#popup").fadeOut('fast')
	})
	$(".closebutton").click(function(){
	$("#popup").fadeOut('fast')
	})
	$(".goquestion").click(function(){
	$("#popup").fadeOut('fast')
	})
	});
	</script>