以下是 jQuery弹出式表单效果js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB" xml:lang="en-GB">
<head>
<title>Contactable 1.5| jQuery Contact Plugin</title>
<link rel="stylesheet" href="demo.css" type="text/css" />
</head>
<body>
<!--start contactable -->
<div id="contactable"><!-- contactable html placeholder --></div>
<link rel="stylesheet" href="contactable.css" type="text/css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.contactable.min.js"></script>
<script>
jQuery(function(){
jQuery('#contactable').contactable(
{
subject: 'feedback URL:'+location.href,
url: 'mail.php',
name: 'Name',
email: 'Email',
dropdownTitle: 'Issue',
dropdownOptions: ['General', 'Website bug', 'Feature request'],
message : 'Message',
submit : 'SEND',
recievedMsg : 'Thank you for your message',
notRecievedMsg : 'Sorry but your message could not be sent, try again later',
disclaimer: 'Please feel free to get in touch, we value your feedback',
hideOnSubmit: true
});
});
</script>
<!--end contactable -->
<div id="page">
<h2> « Click the contact link on the left</h2>
</div>
</body>
</html>
JS代码(jquery.contactable.min.js):
/* * contactable 1.5 - jQuery Ajax contact form * * Copyright (c) 2009 Philip Beel (http://www.theodin.co.uk/) * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * * Revision:$Id:jquery.contactable.min.js 2012-05-26 $ * */
(function(a){
a.fn.contactable=function(b){
var c={
url:"mail.php",name:"Name",email:"Email",dropdownTitle:"",dropdownOptions:["General","Website bug","Feature request"],message:"Message",subject:"A contactable message",submit:"SEND",recievedMsg:"Thank you for your message",notRecievedMsg:"Sorry but your message could not be sent,try again later",disclaimer:"Please feel free to get in touch,we value your feedback",hideOnSubmit:true}
;
var b=a.extend(c,b);
return this.each(function(){
function h(){
a(c+".holder").hide();
a(c+"#loading").show();
a.ajax({
type:"POST",url:b.url,data:{
subject:b.subject,name:a(c+"#name").val(),email:a(c+"#email").val(),issue:a(c+"#dropdown").val(),message:a(c+"#message").val()}
,success:function(d){
a(c+"#loading").css({
display:"none"}
);
if(d.response==="success"){
a(c+"#callback").show().append(b.recievedMsg);
if(b.hideOnSubmit===true){
a(c+"#contactForm").animate({
dummy:1}
,2e3).animate({
marginLeft:"-=450px"}
,"slow");
a(c+"div#contactable_inner").animate({
dummy:1}
,2e3).animate({
marginLeft:"-=447px"}
,"slow").animate({
marginLeft:"+=5px"}
,"fast");
a(c+"#overlay").css({
display:"none"}
)}
}
else{
a(c+"#callback").show().append(b.notRecievedMsg);
setTimeout(function(){
a(c+".holder").show();
a(c+"#callback").hide().html("")}
,2e3)}
}
,error:function(d){
a(c+"#loading").css({
display:"none"}
);
a(c+"#callback").show().append(b.notRecievedMsg)}
}
)}
var c="#"+this.id+" ",d="",e=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{
2,4}
)+$/,f=b.dropdownOptions.length,g;
if(b.dropdownTitle){
d+='<p><label for="issue">'+b.dropdownTitle+' </label><br /><select name="dropdown" id="dropdown" class="dropdown">';
for(g=0;
g<f;
g++){
d+='<option value="'+b.dropdownOptions[g]+'">'+b.dropdownOptions[g]+"</option>"}
d+="</select></p>"}
a(this).html('<div id="contactable_inner"></div><form id="contactForm" method="" action=""><div id="loading"></div><div id="callback"></div><div class="holder"><p><label for="name">'+b.name+'<span class="green"> * </span></label><br /><input id="name" class="contact validate" name="name" /></p><p><label for="email">'+b.email+' <span class="green"> * </span></label><br /><input id="email" class="contact validate" name="email" /></p>'+d+'<p><label for="message">'+b.message+' <span class="green"> * </span></label><br /><textarea id="message" name="message" class="message validate" rows="4" cols="30" ></textarea></p><p><input class="submit" type="submit" value="'+b.submit+'"/></p><p class="disclaimer">'+b.disclaimer+"</p></div></form>");
a(c+"div#contactable_inner").toggle(function(){
a(c+"#overlay").css({
display:"block"}
);
a(this).animate({
marginLeft:"-=5px"}
,"2000");
a(c+"#contactForm").animate({
marginLeft:"-=0px"}
,"2000");
a(this).animate({
marginLeft:"+=387px"}
,"4000");
a(c+"#contactForm").animate({
marginLeft:"+=390px"}
,"4000")}
,function(){
a(c+"#contactForm").animate({
marginLeft:"-=390px"}
,"4000");
a(this).animate({
marginLeft:"-=387px"}
,"4000").animate({
marginLeft:"+=5px"}
,"2000");
a(c+"#overlay").css({
display:"none"}
)}
);
a(c+"#contactForm").submit(function(){
var b=true,d;
a(c+"#contactForm .validate").each(function(){
a(this).removeClass("invalid")}
);
a(c+"#contactForm .validate").each(function(){
if(a(this).val().length<2){
a(this).addClass("invalid");
b=false}
if(!e.test(a(c+"#contactForm #email").val())){
a(c+"#contactForm #email").addClass("invalid");
b=false}
}
);
if(b===true){
h()}
return false}
)}
)}
}
)(jQuery)CSS代码(demo.css):
/* theodin.co.uk -Designed and developed by Philip Beel All Rights Reserved*/
/*------------------------------------------------------------------------------------------------------Genetic--------------*/
/* Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3{color:#211919;position:relative;float:left;letter-spacing:-1px;font-size:1.3em;text-shadow:0px 1px 0px #ffffff;filter:dropshadow(color=#ffffff,offx=0,offy=1);}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
body{background:#C2C9CC;font-family:"helvetica neue",Helvetica,Arial;color:#536371;font-weight:normal;font-size:1em;}
/* Demo */
#content{border-left:2px solid #333333;border-right:2px solid #333333;margin:0 auto;padding:10px;position:relative;width:600px;height:100%;}
#page{margin:0 auto;width:960px;}
#page h2{font-weight:bolder;position:relative;float:left;margin:10px;}
分享到QQ
分享到微博
微信扫一扫
