html登入弹框插件,基于jQuery的弹出框插件
html如下:
$(function() {
$("#btn01").popwin({
element: "#box01",
title: "请填写以下您的基本信息"
});
$("#btn02").popwin({
element: "#box02",
title: "请登陆"
});
})
DEMO
姓名:
密码:
邮箱:
姓名:
密码:
注册
登陆
js插件如下:
/*
* jquery.popwin.js 1.0
* Copyright (c) gaoyubao
* Date: 2012-01-12
* 1.点击按钮,可以弹出你想弹出的内容,只要设置一下id,或者class
2.浏览器窗口缩小的时候,弹出框始终是居中的
3.按ESC间,可以关闭窗口
*/
(function($) {
var css='';
$("head").append(css);
$.fn.popwin= function(options) {
var settings={
element: "element", //哪一个弹出框,可以是id,或者是class
width: 400,
height: 200,
title: "title" //弹出框的title
}
var s=$.extend(settings,options);
var htmlCode=$(s.element).html();
$(s.element).remove();
$.a={
//设置背景的宽和高
setBg: function() {
var bh=$("body").height(),wh=$(window).height(),ww=$(window).width();
if(bh>wh) {
wh=bh;
}
$("#bg").css({
width: ww,
height: wh
});
},
//设置弹出框居中
setFlag: function() {
var l=(document.documentElement.clientWidth-s.width)/2+"px",
t=(document.documentElement.clientHeight-s.height)/2+"px";
$("#flagBox").css({
width: s.width,
height: s.height,
left: l,
top: t
});
},
//弹出框关闭
setClose: function() {
$("#container").remove();
}
};
var html='
'+s.title+'
';
$(window).resize(function() {//调解窗口的大小
$.a.setFlag();
});
return this.each(function() {
$(this).bind("click",function(){
$("body").append(html);
$("#titleBox a").click(function() {
$.a.setClose();
});
$.a.setBg();
$.a.setFlag();
});
$(document).keydown(function(event) {
if(event.which=="27") {
$.a.setClose();
}
});
});
};
})(jQuery)
function isEmail(str) {
var reg = /^([a-zA-Z0-9_-])+@+([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])/;
if(reg.exec(str)) {
return false;
}else {
return true;
}
}
function check() {
var flag=true;
$("#nameErr").html('');
$("#passwordErr").html('');
$("#emailErr").html('');
var username=$("#username").val();
var password=$("#password").val();
var email=$("#email").val();
if(username=="" || username==null) {
$("#nameErr").html("姓名不能为空");
flag=false;
}
if(password=="") {
$("#passwordErr").html("密码不能为空");
flag=false;
}
if(email=="") {
$("#emailErr").html("邮箱不能为空");
flag=false;
}else if(isEmail(email)) {
$("#emailErr").html("邮箱格式错误");
flag=false;
}
return flag;
}
html登入弹框插件,基于jQuery的弹出框插件相关推荐
- html遮罩提示框代码,基于jQuery实现弹出可关闭遮罩提示框实例代码
jquery CSS3遮罩弹出层动画效果,使用非常简单,就两个标签,里面自定义内容和样式,四种常见效果,懂的朋友还可以修改源代码修改成自己想要的效果 先给大家展示下效果图,如果大家感觉还不错,请参考实 ...
- div alert html,基于jQuery的弹出消息插件 DivAlert之旅(一)
想着自己学习Javascript,以及Ajax.jQuery等已经有一段时间了,不过貌似还没有写过一个插件,看到jQuery官网上那么多令人眼前一亮的插件,自己今天也动心说是不是能够写一个类似的插件来 ...
- 基于jQuery的表单验证插件:jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
- 推荐20款基于 jQuery CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js
1.插进使用场景 请打开https://baike.baidu.com/item/日本动画#hotspotmining,查看百度百科页面效果. 2.插件源代码(更新 2017-08-28): jQue ...
- 基于JQuery 编写轮播图插件
基于JQuery 编写轮播图插件 不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧 使用需要准备(往下滑动会看到): ...
- 设置网页便签 html5,基于jQuery的页面便签插件
color-sticker是一款基于jQuery的页面便签插件.它是一个可以任意拖拽,保存,删除,导入和定制颜色的页面便签插件.主要的功能点有以下几点: 点击右上方的蓝色+按钮,可以在页面中添加一个便 ...
- html5窗口播放插件,基于jQuery UI的模拟windows窗口插件
jquery-lwd是一款轻量级的基于jQueryUI的模拟windows窗口插件.该插件可以模拟windows窗口,对窗口进行最大化,最小化,拖动等操作.并提供windows2000经典主题效果.它 ...
- 基于jQuery的表单验证插件Validation Engine
Validation Engine是一款基于Jquery的js表单验证插件.相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合. 附件提供了该插件,解压密码为:im48 ...
最新文章
- matlab中添加0向量,如何把在matlab中把a=0:0.1:pi变成列向量啊?
- javascript 检测 header下载文件--插件
- Verilog MIPS32 CPU(一)-- PC寄存器
- iOS逆向之Protocol Witness Table的汇编实现原理
- 使用SWig出现调用异常的情况
- linux操作系统信号捕捉函数之回调函数小结
- 公众号向特定用户主动推送消息_公众号助手——消息不仅可以群发,还不限制次数!...
- 使用命令来进行modelsim仿真
- sql 生成csv数据_创建包含SQL Server数据的动态生成的CSV文件
- python立方尾不变代码_对于这个蓝桥杯立方尾不变题我用java程序做的,正确结果应该是36,为什么我这样写结果就是12,如...
- 其他学习笔记(一)——MySQL基础配置+可视化工具安装与破解
- header python 环境信息_通过Python扫描代码关键字并进行预警!这样就不会出BUG了吧?...
- GPT分区表出现问题后的数据恢复思路
- 社区版PyCharm(PyCharm Community)也可以有可视化的数据库工具呀
- python通信系统仿真_Python与V-REP联合仿真
- 软件测试简历项目经验该怎么写?【两年经验】
- 汉诺塔递归算法python详细解析图_汉诺塔递归算法分析过程
- 云计算要学python_学习云计算需要哪些基础条件?
- CAD2006 ----VBA(Hello World)
- ArcGIS使用(二)ArcGIS加载天地图
热门文章
- linux卸载cuda10.0,Ubuntu下安装CUDA10.0以及问题
- Java黑皮书课后题第9章:*9.10(代数:二次方程式)为二次方程式设计一个名为QuadraticEquation的类
- Java黑皮书课后题第5章:*5.43(数学:组合)编写程序,显示从整数1到7中选择两个数字的所有组合,同时显示所有组合的总个数
- Centos 开机后,登录时无法输入密码怎么解决
- 运维与自动化运维发展概括
- Window.navigator
- pdf如何转换成word文档
- 个人阅读 代码大全的阅读与提问
- vs2010 插件不显示的问题处理。
- 获取3的倍数_获取和设置pdf目录