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

Modal forms have become a frequently used data transmission method for Web developers to design interfaces. The modal window can improve the website availability. A customer wants a form to pop up the modal mode to submit website feedback. After some tests, I used the jQuery fancybox plug-in to create a beautiful modal form, the data in the submitted form is called by Ajax on the server side. You can receive feedback from users in your email.

Html code
The main JS files in the header Section are as follows: Introduce jquery code and fancybox code.Copy codeThe Code is as follows: <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>

Demo
First, download the latest Fancybox from the official website and decompress it. The core HTML page code is very simple. Here is a hidden DIV. When you click the href link, a modal window is opened.Copy codeThe Code is as follows: <div id = "wrapper">
Send us feedback from the modal window.

<A class = "modalbox" href = "# inline"> click me if you are competent </a> </div>

<! -- Hidden inline form -->
<Div id = "inline">
<H2> send a message to us <Form id = "contact" action = "#" method = "post" name = "contact"> <label for = "email"> your email </label>
<Input id = "email" class = "txt" type = "email" name = "email"/>

<Label for = "msg"> what do you want to say to us </label>
<Textarea id = "msg" class = "txtarea" name = "msg"> </textarea>

<Button id = "send"> send now </button> </form> </div>

CSS style sheets

Set the color, size, and style of the text box to get the focus. Use: HoverAnd: ActiveTo display the status.Copy codeThe 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;
}

I have defined an incorrect css class and used jquery to check whether the data entered by the user is correct. Inputting incorrect data will make the field text, border and background dark. The color of valid data fields will be restored.

Copy codeThe Code is as follows: # 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 button I use CSS3 to create a linear gradient. The Code is as follows:

Use Fancybox

Call the Fancybox Default Code after the page is loaded.
Copy codeThe Code is as follows: $ (document). ready (function (){
$ (". Modalbox"). fancybox ();
$ ("# Contact"). submit (function () {return false ;}); // disable default form submission.

The second line of the Code disables the default contact form submission action. Why? Therefore, we can process our own click events and pass data through Ajax. After the user submits the form, we need to get the current value of the fields (email and message. We also want to check whether the email address is valid and the message length exceeds the specified length value.Copy codeThe Code is as follows: $ ("# 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 ");
}

The above jquery Code uses some logical statements. The form will not be submitted until the email is valid and the message length exceeds 4 letters.

Send Ajax request

Through the onclick event above, you need to send the form data to PHP ., We will receive an email in our inbox. Copy codeThe Code is as follows: // If two fields are verified to pass the next message

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

$ ("# Send"). replaceWith ("<em> sending... </em> ");
$. Ajax ({
Type: 'post ',
Url: 'sendmessage. php ',
Data: $ ("# contact"). serialize (),
Success: function (data ){
If (data = "true "){
$ ("# Contact"). fadeOut ("fast", function (){
$ (This). before ("<p> <strong> submitted successfully! Your message has been sent. Thank you :) </strong> </p> ");

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

The serialize () method is used to serialize submitted ajax data so that standard URL encoding is generated.
After the server responds successfully, the pop-up form is hidden and a success message is displayed. I used the setTimeout () method to close fancybox. Here I set a second to hide the form. The JS Code to perform this operation is $. fancybox. close ().

Use PHP to send emails

Sendmessage. php accepts user input variables. Then call mail to try to send it. If the message is sent successfully, "true" is returned; otherwise, "false" is returned. Copy codeCode: $ sendto = "2495371937@qq.com"; // defines the recipient of the message
$ Usermail = $ _ POST ['email ']; // get an email
$ Content = nl2br ($ _ POST ['msg ']); // get the message

$ Subject = "you have a new message ";
$ Headers = "from:". 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. = "

$ Msg. = "<strong> from: </strong>". $ usermail. "\ r \ n ";
$ Msg. = "<strong> content: </strong>". $ content. "\ r \ n ";
$ Msg. = "";
If (@ mail ($ sendto, $ subject, $ msg, $ headers )){
Echo "true ";
} Else {
Echo "false ";
}

Demo