使用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 相关文章推荐
jquery dialog键盘事件代码
Aug 01 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
Vue中props的详解
May 16 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
js实现旋转木马轮播图效果
Jan 10 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下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
php旋转图片90度的方法
2013/11/07 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
node.js基础知识小结
2018/02/26 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
村级环境卫生整治方案
2014/05/04 职场文书
学校教研活动总结
2014/07/02 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
写给老师的感谢信
2015/01/20 职场文书
转变工作作风心得体会
2016/01/23 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android