使用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实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 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中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
python实现每次处理一个字符的三种方法
2014/10/09 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
竞聘副主任科员演讲稿
2014/01/11 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
《学棋》教后反思
2014/04/14 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
卖车协议书范文
2016/03/23 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers