使用jQuery fancybox外掛程式打造一個實用的資料轉送模態彈出表單

模態表單已經成為Web開發人員設計介面時經常要使用的傳輸資料的方式。通過模態視窗，可以提高網站的可用性。正好項目的需要，有個客戶想要模態彈出的表單來提交網站的反饋，經過一番測試實現了，我使用jQuery fancybox外掛程式來建立一個漂亮的模態表單，提交表單的資料在伺服器端實現Ajax調用。你可以在你的郵件裡收到使用者發送的反饋訊息

html代碼
header部分主要的JS檔案如下引入jquery代碼和fancybox代碼
複製代碼 代碼如下:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.0.6"></script>

示範
首先，從官網下載最新的Fancybox，並解壓縮。核心的HTML頁面代碼是非常簡單的，這裡有一個隱藏的DIV，當使用者單擊href連結時候，開啟一個模態視窗。
複製代碼 代碼如下:
<div id="wrapper">
Send us feedback from the modal window.

<a class="modalbox" href="#inline">有本事你點我</a></div>

<!-- hidden inline form -->
<div id="inline">
<h2>發送訊息給我們</h2>
<form id="contact" action="#" method="post" name="contact"><label for="email">你的郵件</label>
<input id="email" class="txt" type="email" name="email" />

<label for="msg">你想要對我們說</label>
<textarea id="msg" class="txtarea" name="msg"></textarea>

<button id="send">立即發送</button></form></div>
 

CSS樣式表

設定文字框的顏色，大小，獲得焦點下的樣式等等，使用:hover和:active  來顯示狀態。
複製代碼 代碼如下:
.txt {
display: inline-block;
color: #676767;
width: 420px;
font-family: Arial, Tahoma, sans-serif;
margin-bottom: 10px;
border: 1px dotted #ccc;
padding: 5px 9px;
font-size: 1.2em;
line-height: 1.4em;
}

.txtarea {
display: block;
resize: none;
color: #676767;
font-family: Arial, Tahoma, sans-serif;
margin-bottom: 10px;
width: 500px;
height: 150px;
border: 1px dotted #ccc;
padding: 5px 9px;
font-size: 1.2em;
line-height: 1.4em;
}

.txt:focus,
.txtarea:focus {
border-style: solid;
border-color: #bababa;
color: #444;
}

input.error,
textarea.error {
border-color: #973d3d;
border-style: solid;
background: #f0bebe;
color: #a35959;
}

input.error:focus,
textarea.error:focus {
border-color: #973d3d;
color: #a35959;
}

我定義了一個錯誤的css類，結合jquery用來檢測使用者輸入的資料是否正確，輸入錯誤資料會使欄位文字，邊框和背景變成深色。直到使用者輸入有效資料欄位顏色將恢複正常。

複製代碼 代碼如下:
#send {
color: #dee5f0;
display: block;
cursor: pointer;
padding: 5px 11px;
font-size: 1.2em;
border: solid 1px #224983;
border-radius: 5px;
background: #1e4c99;
background: -webkit-gradient(linear, left top, left bottom, from(#2f52b7), to(#0e3a7d));
background: -moz-linear-gradient(top, #2f52b7, #0e3a7d);
background: -webkit-linear-gradient(top, #2f52b7, #0e3a7d);
background: -o-linear-gradient(top, #2f52b7, #0e3a7d);
background: -ms-linear-gradient(top, #2f52b7, #0e3a7d);
background: linear-gradient(top, #2f52b7, #0e3a7d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f52b7', endColorstr='#0e3a7d');
}

#send:hover {
background: #183d80;
background: -webkit-gradient(linear, left top, left bottom, from(#284f9d), to(#0c2b6b));
background: -moz-linear-gradient(top, #284f9d, #0c2b6b);
background: -webkit-linear-gradient(top, #284f9d, #0c2b6b);
background: -o-linear-gradient(top, #284f9d, #0c2b6b);
background: -ms-linear-gradient(top, #284f9d, #0c2b6b);
background: linear-gradient(top, #284f9d, #0c2b6b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#284f9d', endColorstr='#0c2b6b');
}

#send:active {
color: #8c9dc0;
background: -webkit-gradient(linear, left top, left bottom, from(#0e387d), to(#2f55b7));
background: -moz-linear-gradient(top, #0e387d, #2f55b7);
background: -webkit-linear-gradient(top, #0e387d, #2f55b7);
background: -o-linear-gradient(top, #0e387d, #2f55b7);
background: -ms-linear-gradient(top, #0e387d, #2f55b7);
background: linear-gradient(top, #0e387d, #2f55b7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0e387d', endColorstr='#2f55b7');
}

CSS 按鈕我使用 CSS3來建立線型漸層，代碼如上

使用 Fancybox

頁面載入元素完成之後，調用Fancybox預設代碼
複製代碼 代碼如下:
$(document).ready(function() {
$(".modalbox").fancybox();
$("#contact").submit(function() { return false; });//禁用預設的表單提交

代碼的第二行禁用預設的連絡人表單提交動作。為什麼呢？因此這樣我們可以處理自己的單擊事件，並通過 Ajax 傳遞資料。在使用者提交表單後，我們需要得到 （電子郵件和訊息） 兩個欄位的當前值。我們還想要檢查電子郵件地址是否有效和訊息長度是否超過規定的長度值
複製代碼 代碼如下:
$("#send").on("click", function(){
var emailval = $("#email").val();
var msgval = $("#msg").val();
var msglen = msgval.length;
var mailvalid = validateEmail(emailval);

if(mailvalid == false) {
$("#email").addClass("error");
}
else if(mailvalid == true){
$("#email").removeClass("error");
}

if(msglen < 4) {
$("#msg").addClass("error");
}
else if(msglen >= 4){
$("#msg").removeClass("error");
}

上面jquery代碼使用一些邏輯語句。直到電子郵件有效和訊息的長度超過 4 個字母，才會提交表單。

發送Ajax 請求 通過上面的onclick事件，需要將表單資料發送到 PHP。，我們將在我們的收件匣中收到電子郵件。 複製代碼 代碼如下:
// 如果兩個欄位驗證通過接下來發送訊息

//點擊發送按鈕之後 ，按鈕被替換成“發送中”這樣的文字提示，目的是為了防止使用者在點擊提交，提示也更人性化

$("#send").replaceWith("<em>發送中...</em>");
$.ajax({
type: 'POST',
url: 'sendmessage.php',
data: $("#contact").serialize(),
success: function(data) {
if(data == "true") {
$("#contact").fadeOut("fast", function(){
$(this).before("<p><strong>提交成功! 您的留言已經發送, 謝謝 :)</strong></p>");

setTimeout("$.fancybox.close()", 1000);
});
}
}
});
}
});

這裡使用serialize(),方法來序列化提交的ajax資料，使得產生標準的URL編碼
伺服器響應成功之後，隱藏彈出的表單，並顯示一條成功訊息。我使用 setTimeout() 方法來關閉 fancybox ，這裡我設定一秒鐘後隱藏表單。要執行此操作的 JS 代碼是 $.fancybox.close()。

 

使用 PHP發送郵件 sendmessage.php 接受使用者輸入的變數。然後調用mail嘗試發送它，發送成功返回"true"否則返回false
複製代碼 代碼如下:
$sendto = "2495371937@qq.com";//定義郵件的接收者
$usermail = $_POST['email'];//擷取電子郵件
$content = nl2br($_POST['msg']);//擷取訊息

$subject = "你有新的訊息";
$headers = "來自: " . strip_tags($usermail) . "\r\n";
$headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
$headers .= "MIME-Version: 1.0\r\aan";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";

$msg = "";
$msg .= "<h2 style="font-weight: bold; border-bottom: 1px dotted #ccc;">你有新的訊息</h2>\r\n";
$msg .= "<strong>來自:</strong> ".$usermail."\r\n";
$msg .= "<strong>內容:</strong> ".$content."\r\n";
$msg .= "";
if(@mail($sendto, $subject, $msg, $headers)) {
echo "true";
} else {
echo "false";
}

示範