Use the jQuery fancybox plug-in to create a practical data transmission modal pop-up form

Use the jQuery fancybox plug-in to create a practical data transmission modal pop-up form_jquery

WBOY

Release： 2016-05-16 17:43:25

Original

1171 people have browsed it

Modal forms have become a method often used by web developers to transmit data when designing interfaces. With modal windows, you can improve the usability of your website. Just in line with the needs of the project, a customer wanted a modal pop-up form to submit feedback on the website. After some testing, it was implemented. I used jQuery fancybox plug-in to create a beautiful modal form, submit the form data and implement Ajax calls on the server side. You can receive feedback messages from users in your email

html code
The main JS file in the header part is as follows: jquery code and fancybox code are introduced

Copy the code The code is as follows:

Demo
First, download the latest Fancybox from the official website , and unzip it. The core HTML page code is very simple. There is a hidden DIV here. When the user clicks the href link, a modal window opens.

Copy code The code is as follows:

Send us feedback from the modal window.

If you have the ability, please click me

Send us a message

CSS style sheet

Set the text box color, size, style under focus, etc. Use :hover and :active to display the status.

Copy code The code is as follows:

.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。，我们将在我们的收件箱中收到电子邮件。

Copy code The code is as follows:

// If the two fields are verified, send the message next

//After clicking the send button, the button is replaced with a text prompt such as "Sending". The purpose is to prevent users from clicking submit and the prompt is more user-friendly

$("# send").replaceWith("Sending...");
$.ajax({
type: 'POST',
url: 'sendmessage.php ',
data: $("#contact").serialize(),
success: function(data) {
if(data == "true") {
$("#contact ").fadeOut("fast", function(){
$(this).before("

Submission successful! Your message has been sent, thank you:)< ;/p>");

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

The serialize() method is used here to serialize the submitted ajax data, so that standard URL encoding is generated
The server responds successfully Afterwards, hide the popup form and display a success message. I use the setTimeout() method to close fancybox, here I set the form to be hidden after one second. The JS code to do this is $.fancybox.close().

Send email using PHP

sendmessage.php accepts variables entered by the user. Then call mail and try to send it. If the sending is successful, it will return "true" otherwise it will return false

Copy code The code is as follows :

$sendto = "2495371937@qq.com";//Define the recipient of the email
$usermail = $_POST['email'];//Get the email
 $content = nl2br($_POST['msg']);//Get the message 

$subject = "You have a new message"; 
$headers = "From: " . 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 .= "You have new messagesrn"; 
$msg .= "From: ".$usermail ."rn"; 
$msg .= "Content: ".$content."rn"; 
$msg .= ""; 
if(@mail ($sendto, $subject, $msg, $headers)) { 
echo "true"; 
} else { 
echo "false"; 
}

Demo