fancybox插件创设三个实用的多少传输模态弹出窗体

日期:2019-09-15编辑作者:关于计算机

模态窗体已经变为Web开辟职员设计分界面时日常要运用的传输数据的措施。通过模态窗口,可以拉长网址的可用性。正好项指标内需,有个客商想要模态弹出的窗体来交给网址的反馈,经过一番测量检验达成了,小编使用jQuery fancybox插件来创制多少个不错的模态窗体,提交表单的数码在劳务器端完结Ajax调用。你能够在你的邮件里接受客户发送的举报新闻

html代码
header部分珍视的JS文件如下引进jquery代码和fancybox代码

复制代码 代码如下:

<script type="text/javascript" src=";
<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>

 图片 1

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用来检查评定客户输入的多寡是还是不是精确,输入错误数据会使字段文字,边框和背景变成深色。直到顾客输入有效的数目字段颜色将苏醒平常。

图片 2

图片 3

复制代码 代码如下:

#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数据,使得生成标准的USportageL编码
服务器响应成功之后,掩盖弹出的窗体,并显示一条成功新闻。小编利用 set提姆eout() 方法来关闭 fancybox ,这里本身设置一分钟后逃匿窗体。要实行此操作的 JS 代码是 $.fancybox.close()。

图片 4

 

图片 5

选拔 PHP发送邮件

sendmessage.php 接受顾客输入的变量。然后调用mail尝试发送它,发送成功再次回到"true"不然再次来到false

复制代码 代码如下:

$sendto = "2495371937@qq.com";//定义邮件的接收者
$usermail = $_POST['email'];//获取电子邮件
$content = nl2br($_POST['msg']);//获取音讯

$subject = "你有新的音讯";
$headers = "来自: " . strip_tags($usermail) . "rn";
$headers .= "Reply-To: ". strip_tags($usermail) . "rn";
$headers .= "MIME-Version: 1.0raan";
$headers .= "Content-Type: text/html;charset=utf-8 rn";

$msg = "";
$msg .= "<h2 style="font-weight: bold; border-bottom: 1px dotted #ccc;">你有新的新闻</h2>rn";
$msg .= "<strong>来自:</strong> ".$usermail."rn";
$msg .= "<strong>内容:</strong> ".$content."rn";
$msg .= "";
if(@mail($sendto, $subject, $msg, $headers)) {
echo "true";
} else {
echo "false";
}

演示

你可能感兴趣的作品:

  • fancybox1.3.1 基于Jquery的插件在IE中图纸显示难点
  • JQuery插件fancybox不能够在弹出层使用左右键的解决办法
  • jquery fancybox ie6不显得关闭按键的消除办法
  • 接纳JQuery FancyBox插件完毕图片体现特效
  • Jquery插件之Fancybox丰富的弹出层效果附源码下载

本文由今晚最快开奖现场直播发布于关于计算机,转载请注明出处:fancybox插件创设三个实用的多少传输模态弹出窗体

关键词:

给jQuery方法添加回调函数,给jQuery方法添加回调

插件源码 jquery.callback.js 插件开源地址: [javascript]   复制代码 代码如下: /**  /** * @fileOverview本插件用于给jQuery方法添...

详细>>

offsetHeight在OnLoad中赢得为0的气象

在行使IE中,极其在此时此刻div+css的艺术,往往不定义div的万丈,那是在增多div内容后,供给获得div的中度时,往往...

详细>>

JavaScript将相对地址转换为绝对地址示例代码

在看LABjs源代码时,发现里面有个将相对地址转为绝对地址的函数,将其拿出纪录如下: 复制代码 代码如下: functio...

详细>>

js如何实现设计模式中的模板方法

在js中如何实现设计模式中的模板方法? 思路的产生必然要求熟悉js,如何实现?就很简单了,都知道在js中如果定义...

详细>>