使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体


Posted in Javascript onJanuary 15, 2013

模态窗体已经成为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>
 使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体

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用来检测用户输入的数据是否正确,输入错误数据会使字段文字,边框和背景变成深色。直到用户输入有效的数据字段颜色将恢复正常。

使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体

使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体

#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()。

使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体

 

使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体

使用 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"; 
}

演示
Javascript 相关文章推荐
JS中如何设置readOnly的值
Dec 25 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
Vue.js仿Select下拉框效果
Feb 18 Javascript
尝试在让script的type属性等于text/html
Jan 15 #Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 #Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 #Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 #Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 #Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 #Javascript
javascript真的不难-回顾一下基础知识
Jan 15 #Javascript
You might like
php 缓存函数代码
2008/08/27 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
js点击选择文本的方法
2015/02/09 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
python中字典(Dictionary)用法实例详解
2015/05/30 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
Java面试题:为什么要用Java
2012/05/11 面试题
外贸英语专业求职信范文
2013/12/25 职场文书
采购人员的个人自我评价
2014/01/16 职场文书
歌剧魅影观后感
2015/06/05 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers