自定义提示层弹出层弹窗jq插件代码

简化版

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>

<form id="myform" action="" method="POST">
Username: 
<input type="text" name="uname" />
<input type="text" name="tel" />
<input type="text" name="email" /><textarea name="content" rows="10" cols="30"></textarea>
<p style="margin-top:999px;"><input type="submit" value="提交" /></p>
<input type="button" value="提交">
</form>

<!--
	name值
	昵称 uname
	姓名 rname
	标题 title
	手机 tel
	邮箱 email
	内容 content
	联系人 ucontacts
	地址 address
	联系方式 contacts
-->

<script>

;(function ($) {
    $.fn.tishicengjsqiu = function() {
		var mycars = new Array();
		//name值 对应提示
		mycars['uname'] = "请填写昵称";
		mycars['rname'] = "请填写姓名";
		mycars['title'] = "请填写标题";
		mycars['email'] = "请填写邮箱";
		mycars['tel'] = "请填写11位手机号";
		mycars['content'] = "请填写内容";
		mycars['ucontacts'] = "请填写联系人";
		mycars['address'] = "请填写地址";
		mycars['contacts'] = "请填写联系方式";
		
		$(this).submit(function(){
			var sv=true;
			$(this).children().each(function (){
			   var fname=$(this).attr('name');
			   if(fname && (!$(this).val() || fname=='tel' || fname=='email')){
					var thisval=$(this).val();
					if(fname=='tel'){
						if(thisval.length ==11 && !isNaN(thisval)){
							//sv=true;
							return true;
						}
					}else if(fname=='email'){
						
						//对电子邮件的验证
						var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
						if(myreg.test(thisval)){
							//alert('提示\n\n请输入有效的E_mail！');
							//myreg.focus();
							//sv=true;
							return true;
						}
					}
					$(this).val(mycars[fname]);
					$(this).css({'color':'red','background':'yellow'});
					//$(this).attr('id','fotishiidddxzq');
					$("html,body").animate({scrollTop:$(this).offset().top},100);
					var sthis=this;
					var test = setTimeout(function(){
						//alert($(sthis).attr('name'));
						$(sthis).removeAttr('style');
						$(sthis).val('');
						$(sthis).focus();
					},1200);
					
					//清理方法 
					//clearTimeout(test);
					sv=false;
					return false;
			   }
			});
			return sv;
		});

		
	}
})(jQuery);
//使用
$('#myform').tishicengjsqiu();
</script>

更新：【最新版本】在线演示 | FORM输入框表格验证版
 Animate.css css3动画库动画效果选择
1、加入
2、优化部分代码
3、去掉外部样式表<style>改用内联样式
HTML:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<body style="height:1000px;">
<a onclick="tishicengjsqiuonclick();">点击弹出提示层</a>



<!--提示层代码开始-->
<link rel="stylesheet" href="animate.min.css">
<script type="text/javascript" src="tishicengjsqiu.js"></script>
<script>
	function tishicengjsqiuonclick(){
		$('body').tishicengjsqiu({
			textwz:  '提示层文字内容', //提示层文字 支持html
			tishicbj: 'red', //提示层背景 #ddd
			colors: '#fff', //文字颜色
			iddtt:3, //自动关闭时间秒
			admmint:'bounceInLeft', //显示动画
			//动画属性说明
			admmout:'hinge' //隐藏动画
		});
	}
</script>
<!--提示层代码结束-->



</body>

tishicengjsqiu.js 新版本添加重复点击清除定时器防止重复弹出叠加提示层

;(function ($) {
	var pcid;
    $.fn.tishicengjsqiu = function(options) {
		//定义插件的名称，这里为tishicengjsqiu
		// lizhenqiu.com
		
		var timestamp = Date.parse(new Date());
        var dft = {
            //以下为该插件的属性及其默认值
            textwz: '提示层插件文字', 
            tishicbj: '#ddd', //提示层背景
            colors: 'yellow', //文字颜色
			idd:'tishicengxiaolizhenqiujqcj'+timestamp,//提示层id
			iddtt:3,
			admmint:'rollIn', //显示动画
			admmout:'hinge' //隐藏动画
        };
		
        var ops = $.extend(dft,options);
		
		if($('#'+pcid)) $('#'+pcid).remove();//清除前一层提示
		var htmlss='<div class="animated ' + ops.admmint + '" id="' + ops.idd + '" style="background: ' + ops.tishicbj + ';border-radius: 3px;color: ' + ops.colors + ';display: inline-block;padding: 6px 12px;position: fixed;top: 50%;left: 50%;visibility: hidden;z-index: 2147483646;">' + ops.textwz + '</div>';
        $(this).append(htmlss);
		var twidth=($('#'+ops.idd).width()+24)/2;
		var theight=($('#'+ops.idd).height()+12)/2;
		$('#'+ops.idd).css({'visibility':'visible','margin-top':+(0-theight),'margin-left':+(0-twidth)});
		
		//清除定时器
		if(pcid) clearTimeout( tt );//终止触发的setTimeout防止重复执行
		
		var tt=setTimeout(function(){
			$('#'+ops.idd).removeClass(ops.admmint);
			$('#'+ops.idd).addClass(ops.admmout);
			//$('#'+ops.idd).remove();
		},ops.iddtt*1000); //延时3秒 
		
		//保存上一个提示层id
		pcid=ops.idd;
		
    }
})(jQuery);

Animate.css 一款强大的预设css3动画库
 Aniauto
~~旧版本 tishicengjsqiu.js~~

(function ($) {
    $.fn.tishicengjsqiu = function(options) {
		//定义插件的名称，这里为tishicengjsqiu
		// lizhenqiu.com
        var dft = {
            //以下为该插件的属性及其默认值
            textwz: '提示层插件文字', 
            tishicbj: '#ddd', //提示层背景
            colors: 'yellow', //文字颜色
			idd:'tishicengxiaolizhenqiujqcj',//提示层id
			iddtt:3,
			admmint:'rollIn', //显示动画
			admmout:'hinge' //隐藏动画
        };
        var ops = $.extend(dft,options);
		$('#'+ops.idd).remove();
		var htmlss='<div class="animated ' + ops.admmint + '" id="' + ops.idd + '" style="background: ' + ops.tishicbj + ';border-radius: 3px;color: ' + ops.colors + ';display: inline-block;padding: 6px 12px;position: fixed;top: 50%;left: 50%;visibility: hidden;">' + ops.textwz + '</div>';
        $(this).append(htmlss);
		var twidth=($('#'+ops.idd).width()+24)/2;
		var theight=($('#'+ops.idd).height()+12)/2;
		$('#'+ops.idd).css({'visibility':'visible','margin-top':+(0-theight),'margin-left':+(0-twidth)});
		setTimeout(function(){
			$('#'+ops.idd).removeClass(ops.admmint);
			$('#'+ops.idd).addClass(ops.admmout);
			//$('#'+ops.idd).remove();
		},ops.iddtt*1000); //延时3秒 
    }
})(jQuery);

~~【旧版本】附近下载：~~http://pan.lizhenqiu.com/?id=8ebee5bc6a190c203c8f59f904fb3f5e1479114033000

http://pan.lizhenqiu.com/?k=提示层

snabbt.js 强大的jQuery动画库插件下载

动画库 http://www.oschina.net/translate/15-best-javascript-animation-libraries-for-developers

aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果，以及多种easing效果。在页面往回滚动时，元素会恢复到原来的状态。 jQueryAos下载

=============旧版本=============

~~HTML:~~

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<body style="height:1000px;">









<!--提示层代码开始-->
<script type="text/javascript" src="tishicengjsqiu.js"></script>
<script>
    $('body').tishicengjsqiu({
		textwz:  '提示层文字内容', //提示层文字 支持html
		tishicbj: '#ddd', //提示层背景
		colors: 'yellow', //文字颜色
		iddtt:3 //自动关闭时间秒
    });


</script>
<!--提示层代码结束-->



</body>

~~tishicengjsqiu.js~~

(function ($) {
    $.fn.tishicengjsqiu = function(options) {
		//定义插件的名称，这里为tishicengjsqiu
        var dft = {
            //以下为该插件的属性及其默认值
            textwz: '提示层插件文字', 
            tishicbj: '#ddd', //提示层背景
            colors: 'yellow', //文字颜色
			idd:'tishicengxiaolizhenqiujqcj',//提示层id
			iddtt:3
        };
        var ops = $.extend(dft,options);
		$('#'+ops.idd).remove();
		var htmlss='<style>#' + ops.idd + '{background: ' + ops.tishicbj + ';border-radius: 3px;color: ' + ops.colors + ';display: inline-block;padding: 6px 12px;position: fixed;top: 50%;left: 50%;visibility: hidden;}</style><div id="' + ops.idd + '">' + ops.textwz + '</div>';
        $(this).append(htmlss);
		var twidth=($('#'+ops.idd).width()+24)/2;
		var theight=($('#'+ops.idd).height()+12)/2;
		$('#'+ops.idd).css({'visibility':'visible','margin-top':+(0-theight),'margin-left':+(0-twidth)});
		setTimeout(function(){$('#'+ops.idd).remove()},ops.iddtt*1000); //延时3秒 
    }
})(jQuery);

~~附件下载：~~http://pan.lizhenqiu.com/?id=5733d0b917b89d62d40e773429c0ecbd1479094785000

jQuery 操作 CSS addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 jQuery绑定select的onchange事件 $(document).ready(function(){ $('#selectid').change(function(){ alert($(this).children('option:selected').val()); //弹出select的值 }); }) jquery获取select选中值 jquery获取select选择的文本与值获取select 选中的 text : $("#ddlregtype").find("option:selected").text(); 获取select选中的 value: $("#ddlregtype ").val(); 获取select选中的索引: $("#ddlregtype ").get(0).selectedindex; jquery点击文本框全选文字 $("input:text").click(function(){ $(this).select(); });

JavaScript获取当前时间戳第一种方法： var timestamp = Date.parse(new Date()); 结果：1280977330000 第二种方法： var timestamp = (new Date()).valueOf(); 结果：1280977330748 以上代码将获取从 1970年1月1日午夜开始的毫秒数。二者的区别是，第一种方法的毫秒位上为全零，即只是精确到秒的毫秒数如题所示，返回unix时间戳所对应的具体时间： var time = '1278927966'; // 关键在乘1000，因为时间是相对于1970年开始的，所以乘1000后将会转到当前时间。 var real_time = new Date(time) * 1000; document.write(real_time); 代码很简单就完成时间戳的转换。 javascript 中使用 new Date().getTime() 方法 IE8 以上版本可以使用直接使用Date.now()方法 //IE8以下版本 if (!Date.now) { Date.now = function() { return new Date().getTime(); }; } jQuery 获取时间戳 $.now() var timestamp = $.now(); 以下是其它网友的补充： JavaScript 获取当前时间戳：第一种方法： var timestamp = Date.parse(new Date()); 结果：1280977330000 第二种方法： var timestamp = (new Date()).valueOf(); 结果：1280977330748 第三种方法： var timestamp=new Date().getTime()；结果：1280977330748 第一种：获取的时间戳是把毫秒改成000显示，第二种和第三种是获取了当前毫秒的时间戳。

设置定时器，在一段时间之后执行指定的代码，setTimeout与setInterval的区别在于setTimeout函数指定的代码仅执行一次方法一： window.setTimeout("alert('ok')",5000); 方法二： window.setTimeout(function() { alert("Ok"); }, 5000); 方法三： function showAlert() { alert("ok"); } window.setTimeout(showAlert, 5000); clearTimeout 清除setTimeout函数设置的定时器 function showAlert() { alert("ok"); } var tt = window.setTimeout(showAlert, 5000); window.clearTimeout(tt); 1.setTimeout,clearTimeout:设置暂停使用window对象的setTimeout()方法设置暂停。该方法接受两个参数，要执行的代码和在执行它之前要等待的毫秒数(1/1000秒)。第一个参数可以是代码串(与eval()函数的参数相同)，也可以是函数指针。例如，下面的代码都在1秒钟后显示一条警告： setTimeout("alert('Hello World!')",1000); setTimeout(function() { alert('Hello World!'); },1000); 当然，还可以引用以前定义的函数： function sayHelloWorld() { alert("Hello World!"); } setTimeout(sayHelloWorld,1000); 调用setTimeout()时，它创建一个数字暂停ID，与操作系统中的进程ID相似。暂停ID本质上是要延迟的进程ID，再调用 setTimeout()后，就不应该再执行它的代码。要取消还未执行的暂停，可调用clearTimeout()方法，并将暂停ID传递给它： var iTimeoutId = setTimeout("alert('Hello World!')",1000); alert(iTimeoutId); clearTimeout(iTimeoutId); 其中，iTimeoutId 是一串数字，例如上述代码打出的iTimeoutId。你也许会问：“为什么要定义暂停，又在执行它之前将其取消呢？”请考虑在大多数应用程序中可见的工具提示。当把鼠标移动到一个按钮上时，停留一会，等待出现黄色的文本框，提示该按钮的功能。如果只是短暂的把鼠标该按钮上，然后很快将其移动到另一个按钮上，那么第一个按钮的工具提示就不会显示，这就是要在执行暂停代码前取消它的原因。因为你在执行代码前只想等待指定的时间量。如果用户的操作产生了不同的结果，则要取消该暂停。 2.setInterval,clearInterval设置时间间隔时间间隔与暂停的运行方式相似，只是它无限此地每隔指定的时间段就重复执行一次指定的代码。可调用setInterval()方法设置时间间隔，它的参数与setTimeout()相同，是要执行的代码和每次执行之间等待的毫秒数。例如： setInterval("alert('Hello world!')",1000); setInterval(function() { alert("Hello world!"); },1000); function sayHelloWorld() { alert("Hello World!"); } setInterval(sayHelloWorld,1000); 此外，与setTimeout()类似，setInterval()方法也创建时间间隔ID，以标识要执行的代码。clearInterval()方法可用这个ID阻止再次执行该代码。显然。这一点在使用时间间隔时更重要，因为如果不取消时间间隔，就会一直执行它，直到页面被卸载为止。下面是时间间隔用法的一个常见示例： var iNum = 0; var iMax = 100; var iIntervalId = null; function incNum() { iNum++; if(iNum == iMax) { clearInterval(iIntervalId); } } iIntervalId = setInterval(incNum, 500); 在这段代码中，每隔500毫秒就对数字iNum进行一次增量运算，直到它达到最大值(iMax), 此时该时间间隔将被清除。也可以用暂停实现该操作，这样即不必跟踪时间间隔的ID，代码如下： var iNum = 0; var iMax = 100; function incNum() { iNum++; if(iNum != iMax) { setTimeout(incNum,500); } } setTimeout(incNum,500); 这段代码使用链接暂停，即setTimeout()执行的代码页调用了setTimeout()。如果在执行过增量运算后，iNum不等于 iMax,就调用setTimeout()方法。不必跟踪暂停ID，也不必清除它，因为代码执行后，将销毁暂停ID。 clearInterval() 方法可取消由 setInterval() 设置的 timeout。 clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。实例下面这个例子将每隔 50 毫秒调用 clock() 函数。您也可以使用一个按钮来停止这个 clock： <input type="text" id="clock" size="35" /> <script language=javascript> var int=self.setInterval("clock()",50) function clock() { var t=new Date() document.getElementById("clock").value=t } </script> <button onclick="int=window.clearInterval(int)">Stop interval</button>

$(".zx>li").click(function() { clearTimeout(cce); }); var cce; $(window).scroll(function() { var wintop = $(window).scrollTop(); clearTimeout( cce );//终止触发的setTimeout防止重复执行 cce = setTimeout(function() { if (wintop > 200) { if (!$(".bh").hasClass("gb")) { $(".bh").addClass("gb"); $(".bh").animate({ top: 57 }, 500); return false; } } }, 1000); });

Comments 评论区

广西南宁市 2016-11-14 17:29

#⁰

广西南宁市 2016-11-15 11:01

广西南宁市 2016-11-15 11:02

jquery随机获取0-40其中一个数

parseInt(40*Math.random())

setTimeout,clearTimeout,setInterval,clearInteral详解

广西南宁市 2016-11-15 11:03

广西南宁市 2016-11-15 11:05

JS中多个setTimeOut函数为什么会同时运行？

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。