使用jQuery fancybox插件创建一个实用的数据传输模式弹出表单

模态形式已经成为Web开发人员在设计界面时传输数据的常用方式。模态窗口可以提高网站的可用性。正好赶上项目的需要，一个客户想要一个模态弹出表单来提交来自网站的反馈。经过一些测试，我使用jQuery fancybox插件创建了一个漂亮的模态表单，提交表单的数据在服务器端被称为Ajax。您可以在电子邮件中收到用户发送的反馈消息。html代码头的主要JS文件如下。介绍jquery代码和fancybox代码。复制代码如下： Script Type=' text/JavaScript ' src=' http :https://ajax.googleapis.com/Ajax/libs/jquery/1 . 7 . 2/jquery . min . js '/Script Type=' text/JavaScript ' src=' http : fancy box/jquery . fancy box . js？v=2 . 0 . 6 '/脚本演示首先，从官网下载最新的Fancybox并解压。核心HTML页面代码非常简单，有一个隐藏的DIV，当用户点击href链接时会打开一个模态窗口。复制的代码如下： div ID=' wrapper '从模态窗口向我们发送反馈。a class='模态框' href=' # inline '如果可以请单击我/a/div！-隐藏内联表单-div id=' inline ' H2给我们发送消息/H2 form id=' contact ' action=' # ' method=' post ' name=' contact ' Label for=' email '您的邮件/Label id=' email ' class=' txt ' type=' email ' name=' email '/Label for=' msg '您想告诉我们/Label textareid=' msg ' class=' txt area ' name=' msg '/textarebutton id=' send '立即发送/button/form/。

CSS样式表设置文本框的颜色和大小，获取焦点下的样式等。并使用：hover和：active显示状态。复制代码如下： txt { display : inline-block；color: # 676767宽度： 420 px；font-family: Arial，Tahoma，无衬线；边距-bottom : 10px；border: 1px虚线# cccpadding: 5px 9pxfont-size : 1.2 em；线高： 1.4 em；} .txtarea { display:块；resize:无；color: # 676767font-family: Arial，Tahoma，无衬线；边距-bottom : 10px；宽度： 500 px；高度： 150像素；border: 1px虚线# cccpadding: 5px 9pxfont-size : 1.2 em；线高： 1.4 em；} .txt:focus， txtarea : focus { border-style : solid；border-color : # bababa；color: # 444} input.error，text area . error { border-color : # 973d 3d；边框样式：实心；背景技术# f0bebecolor: # a35959} input.error:focus，text area . error : focus { border-color : # 973d 3d；color: # a35959}我定义了一个error css类，用来结合jquery检查用户输入的数据是否正确。输入错误数据会使字段文本、边框和背景变暗。在用户输入有效数据字段之前，颜色将恢复正常。

复制代码代码如下： #发送{ color: # dee5f0display:块；光标：指针；padd : 5px 11 pxfont-size : 1.2 em；border:固体1px # 224983边界半径： 5px背景： # 1e 4c 99背景：-网络套件-渐变（线性，左上，左下，从(#2f52b7)，到(# 0e3a 7d))；背景：-moz-线性梯度(顶部、#2f52b7、# 0e3a 7d)；背景：-网络套件-线性-渐变(顶部、#2f52b7、# 0e 3 a7d)；背景：-o-线性梯度（顶部、#2f52b7、# 0e3a 7d)；背景：毫秒线性梯度(顶部、#2f52b7、# 0e 3 a7d)；背景技术：线性渐变（顶部、#2f52b7、# 0e3a 7d)；过滤器： progid : maximagettransform .微软。渐变(startColorstr=' # 2f 52 b 7 '，endColorstr=' # 0e3a 7d ')；} #发送：悬停{后台： # 183 d80背景：-网络套件-渐变(线性、左上、左下，从(#284f9d)到(# 0 C2 b6b))；背景：-moz-线性梯度(顶部、#284f9d、# 0 C2 b6b)；背景：-网络套件-线性-渐变(顶部、#284f9d、# 0 C2 b6b)；背景：-o-线性梯度（顶部、#284f9d、# 0 C2 b6b)；背景：毫秒线性梯度（顶部、#284f9d、# 0 C2 b6b)；背景技术：线性渐变（顶部、#284f9d、# 0 C2 b6b)；过滤器： progid : maximagettransform .微软。渐变(startColorstr=' # 284 f9d '，endColorstr=' # 0c2b 6b ')；} #发送：活动{颜色： # 8c 9 DC 0；背景：-网络套件-渐变（线性，左上，左下，从(#0e387d)到(# 2f 55 B7))；背景：-moz-线性梯度(顶部、#0e387d、# 2f 55 B7)；背景：-网络套件-线性-渐变(顶部、#0e387d、# 2f 55 B7)；背景：-o-线性梯度（顶部、#0e387d、# 2f 55 b 7)；背景：-ms-线性梯度（顶部、#0e387d、# 2f 55 b 7)；背景技术：线性渐变（顶部、#0e387d、# 2f 55 B7)；过滤器： progid : maximagettransform .微软。渐变(startcolorst=' # 0e 387d '，endcolorst=' # 2f 55 b 7 ')；}CSS按钮我使用CSS3来创建线型渐变，代码如上使用Fancybox页面加载元素完成之后，调用Fancybox默认代码复制代码代码如下：美元（文件)。ready(function() { $(')).modalbox ').花式盒子()；$('#contact ').提交()函数(){ return false })；//禁用默认的窗体提交代码的第二行禁用默认的联系人表单提交动作。为什么呢？因此这样我们可以处理自己的单击事件，并通过埃阿斯传递数据。在用户提交表单后，我们需要得到（电子邮件和消息)两个字段的当前值。我们还想要检查电子邮件地址是否有效和消息长度是否超过规定的长度值复制代码代码如下：$('#send ').on('click '，function(){ var email val=$(' # email ').val()；var msgval=$('#msg ').val()；var msglen=msg val . length var mail valid=val验证电子邮件(email val)；if(mailvalid==false) { $('#email ').addClass(')错误');} else if(mail valid==true){ $(' # email ').removeClass(“”错误');} if(msglen 4) { $('#msg ').addClass(')错误');} else if(msglen=4){ $('#msg ').removeClass(“”错误');}上面jquery代码使用一些逻辑语句。直到电子邮件有效和消息的长度超过四个字母，才会提交表单。发送埃阿斯请求通过上面的onclick事件，需要将表单数据发送到PHP。我们将在我们的收件箱中收到电子邮件。复制代码代码如下：//如果两个字段验证通过接下来发送消息//点击发送按钮之后，按钮被替换成"发送中"这样的文字提示，目的是为了防止用户在点击提交，提示也更人性化$(“# send”).替换为(' em发送中./em’)；$.ajax({ type: 'POST '，url: 'sendmessage.php '，data: $('#contact ').序列化()，成功：函数（数据){ if(数据==“true”){ $(“# contact”).fadeOut('fast '，function(){ $(this)).在(' pstrong)之前提交成功！您的留言已经发送，谢谢：)/strong/p '；setTimeout('$.fancybox.close()'，1000)；});} } });} });这里使用serialize()，方法来序列化提交的创建交互式、快速动态网页应用的网页开发技术数据，使得生成标准的统一资源定位器编码服务器响应成功之后，隐藏弹出的窗体，并显示一条成功消息。

我使用setTimeout()方法关闭fancybox，在那里我设置一秒钟后隐藏表单。执行此操作的JS代码是$.fancybox.close()。

使用服务器端编程语言(专业超文本预处理器的缩写)发送邮件sendmessage.php接受用户输入的变量。然后调用邮件尝试发送它，发送成功返回真的否则返回错误的复制代码代码如下：美元发送至='[电子邮件保护]'；//定义邮件的接收者$ user mail=$ _ POST[' email ']；//获取电子邮件$ content=nl2br($ _ POST[' msg '])；//获取消息$subject='你有新的消息；$headers='来自： ' .strip_tags($usermail).\ r \ n '；$ headers .='回复-To: ' .strip_tags($usermail).\ r \ n '；$ headers .=' MIME-版本： 1.0 \ r \ aan '；$ headers .='内容-类型：文本/html；charset=utf-8 \ r \ n '；$ msg=$味精=' H2风格='字体粗细：粗体；边框-底部： 1px虚线# ccc '你有新的消息/H2 \ r \ n '；$味精='强来自：/strong .$usermail .\ r \ n '；$味精='强内容：/strong .$内容“，\ r \ n”；$味精。='';if(@mail($sendto，$subject，$msg，$ headers)){ echo ' true '；} else { echo ' false}演示