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

模态窗体已经成为Web开发人员设计界面时经常要使用的传输数据的方式。通过模态窗口，可以提高网站的可用性。正好项目的需要，有个客户想要模态弹出的窗体来提交网站的反馈，经过一番测试实现了，我使用jQuery fancybox插件来创建一个漂亮的模态窗体，提交表单的数据在服务器端实现Ajax调用。你可以在你的邮件里收到用户发送的反馈消息 [b]html代码[/b] header部分主要的JS文件如下引入jquery代码和fancybox代码

[url=http://www.linzhongmanbu.com/wp-content/demo/code//]演示[/url][/b] 首先，从官网[url=http://fancyapps.com/fancybox/#license]下载最新的Fancybox，[/url]并解压缩。核心的HTML页面代码是非常简单的，这里有一个隐藏的DIV，当用户单击href链接时候，打开一个模态窗口。

[url=#inline]  <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>

[img]http://files.jb51.net/file_images/article/201301/2013011516161514.png[/img] [b]CSS样式表[/b] 设置文本框的颜色，大小，获得焦点下的样式等等，使用[b]:hover[/b]和[b]:active [/b]来显示状态。

[u]复制代码[/u][/url] 代码如下:

.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用来检测用户输入的数据是否正确，输入错误数据会使字段文字，边框和背景变成深色。直到用户输入有效的数据字段颜色将恢复正常。 [img]http://files.jb51.net/file_images/article/201301/2013011516161515.png[/img] [img]http://files.jb51.net/file_images/article/201301/2013011516161516.png[/img]

[url=http://www.linzhongmanbu.com/wp-content/demo/code//]演示[/url][/b]

全部评论(0)

上一篇：jquery实现经典的淡入淡出选项卡效果代码
下一篇：整理的40个有用的jQuery技术和教程