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

发布时间：2016-11-14, 11:38:59 分类：HTML | 编辑 off 网址 | 辅助

正文 8725字数 505,117阅读

简化版

<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>

Run code

Cut to clipboard

更新：【最新版本】在线演示 | 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>

Run code

Cut to clipboard

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);

Run code

Cut to clipboard

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);

Run code

Cut to clipboard

~~【旧版本】附近下载：~~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>

Run code

Cut to clipboard

~~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);

Run code

Cut to clipboard

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

（支付宝）给作者钱财以资鼓励（微信）→

有过 6 条评论 »

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

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();
});

reply | quote | #¹

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

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显示，
第二种和第三种是获取了当前毫秒的时间戳。

reply | quote | #²

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

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

parseInt(40*Math.random())

reply | quote | #³

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

setTimeout,clearTimeout,setInterval,clearInteral详解

设置定时器，在一段时间之后执行指定的代码，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>

reply | quote | #⁴

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

$(".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);
});

reply | quote | #⁵

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

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

reply | quote | #⁶

Records:6 1/1 «‹1 ›»

lizhenqiu blog

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

相关日志

有过 6 条评论 »

留下評論