使用jQuery fancybox插件打造一個實用的資料傳輸模態彈出窗體_jquery

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

html程式碼
html代碼

header部分主要的JS檔案如下引入jquery程式碼和fancybox程式碼

複製程式碼

複製程式碼

程式碼如下
示範首先，從官網下載最新的Fancybox，下載最新的F

並解壓縮。 核心的HTML頁面程式碼是非常簡單的，這裡有一個隱藏的DIV，當使用者點擊href連結時候，開啟一個模態視窗。

複製程式碼


程式碼如下:

Send us feedback from the modal window.

有本事你點我

發送訊息給我們

你的郵件 你想要對我們說 立即寄

  CSS樣式表 設定文字方塊的顏色，大小，取得焦點下的樣式等等，使用:hover

和 :active  

來顯示

狀態。




複製程式碼


程式碼如下:


.txt {
display;
color: #676767;
width: 420px;
font-family: Arial, Tahoma, sans-serif;
margin-bottom: 10px;
bif; padding: 5px 9px;
font-size: 1.2em;
line-height: 1.4em;
}

.txtarea {
display: block color: #676767;
font-family: Arial, Tahoma, sans-serif;
margin-bottom: 10px;
width: 500px;
border: 1px dotted #ccc;
padding: 5px 9px;
font-size: 1.2em;
line-height: 1.4em;
}
. :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;
}

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("發送中...");
$.ajax({
type: 'POST',
url: 'sendmessage.php',
data: $("#contact").serialize(),
success: function(data) {
if(data == "true") {
$("#contact") .fadeOut("fast", function(){
$(this).before("

提交成功! 您的留言已經發送, 謝謝:)

") ;

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

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

 

使用 PHP發送郵件

sendmessage.php 接受使用者輸入的變數。 然後呼叫郵件嘗試發送它，發送成功返回"true"否則返回false

複製代碼 代碼如下:

$sendto = "2495371937@qq.com";//定義郵件的接收者
$usermail = $_POST['email'];//取得電子郵件
$content = nl2br($_POST['msg']);//取得訊息

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

$msg = "";
$msg .= "

你有新的訊息

rn";
$msg .= "來自: ".$usermail."rn";
$msg .= "內容: ".$content."rn";
$msg .= "";
if(@mail($sendto, $subject, $msg, $headers)) {
echo "true";
} else {
echo "false";
}

示範