php 弹窗插件
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery弹出层登录页面表单 - 站长素材</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<link rel="Stylesheet" type="text/css" href="style/loginDialog.css" /> </head>
<body>
<a href="#" id="example">登录DIY账号窗口示例</a>
<div id="LoginBox">
<form action="123.html" method="post">
<div class="row1">
登录DIY账号窗口<a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="closeBtn">×</a>
</div>
<div class="row">
用户名: <span class="inputBox">
<input type="text" id="txtName" placeholder="账号/邮箱" />
</span><a href="javascript:void(0)" title="提示" class="warning" id="warn">*</a>
</div>
<div class="row">
密 码: <span class="inputBox">
<input type="text" id="txtPwd" placeholder="密码" />
</span><a href="javascript:void(0)" title="提示" class="warning" id="warn2">*</a>
</div>
<div class="row">
<a href="#" id="loginbtn">登录</a>
<input type="submit" value="登录" />
</div>
</form>
</div>
<script type="text/javascript">
$(function ($) {
//弹出登录
$("#example").hover(function () {
$(this).stop().animate({
opacity: ''
}, );
}, function () {
$(this).stop().animate({
opacity: '0.6'
}, );
}).on('click', function () {
$("body").append("<div id='mask'></div>");
$("#mask").addClass("mask").fadeIn("slow");
$("#LoginBox").fadeIn("slow");
});
//
//按钮的透明度
$("#loginbtn").hover(function () {
$(this).stop().animate({
opacity: ''
}, );
}, function () {
$(this).stop().animate({
opacity: '0.8'
}, );
});
//文本框不允许为空---按钮触发
$("#loginbtn").on('click', function () {
var txtName = $("#txtName").val();
var txtPwd = $("#txtPwd").val();
if (txtName == "" || txtName == undefined || txtName == null) {
if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
$(".warning").css({ display: 'block' });
}
else {
$("#warn").css({ display: 'block' });
$("#warn2").css({ display: 'none' });
}
}
else {
if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
$("#warn").css({ display: 'none' });
$(".warn2").css({ display: 'block' });
}
else {
$(".warning").css({ display: 'none' });
}
}
});
//文本框不允许为空---单个文本触发
$("#txtName").on('blur', function () {
var txtName = $("#txtName").val();
if (txtName == "" || txtName == undefined || txtName == null) {
$("#warn").css({ display: 'block' });
}
else {
$("#warn").css({ display: 'none' });
}
});
$("#txtName").on('focus', function () {
$("#warn").css({ display: 'none' });
});
//
$("#txtPwd").on('blur', function () {
var txtName = $("#txtPwd").val();
if (txtName == "" || txtName == undefined || txtName == null) {
$("#warn2").css({ display: 'block' });
}
else {
$("#warn2").css({ display: 'none' });
}
});
$("#txtPwd").on('focus', function () {
$("#warn2").css({ display: 'none' });
});
//关闭
$(".close_btn").hover(function () { $(this).css({ color: 'black' }) }, function () { $(this).css({ color: '#999' }) }).on('click', function () {
$("#LoginBox").fadeOut("fast");
$("#mask").css({ display: 'none' });
});
});
</script>
</body>
</html>
loginDialog.css
@charset "utf-8";
.mask{margin:;padding:;border:none;width:%;height:%;background:#;opacity:0.6;filter:alpha(opacity=);z-index:;position:fixed;top:;left:;display:none;}
#LoginBox{position:absolute;left:460px;top:150px;background:white;width:426px;height:282px;border:3px solid #;border-radius:7px;z-index:;display:none;}
.row1{background:#f7f7f7;padding:0px 20px;line-height:50px;height:50px;font-weight:bold;color:#;font-size:20px;}
.row{height:77px;line-height:77px;padding:0px 30px;font-family:华文楷体;font-size:x-large;}
.close_btn{font-family:arial;font-size:30px;font-weight:;color:#;text-decoration:none;float:right;padding-right:4px;}
.inputBox{border:1px solid #c3c3c3;padding:1px 3px 6px 3px;border-radius:5px;margin-left:5px;}
#txtName{height:27px;width:230px;border:none;}
#txtPwd{height:27px;width:230px;border:none;}
#loginbtn{color:White;background:#4490f7;text-decoration:none;padding:10px 95px;margin-left:87px;margin-top:40px;border-radius:5px;opacity:0.8;filter:alpha(opacity=);}
#example{position:fixed;left:390px;top:30px;color:White;background:#4490f7;text-decoration:none;padding:10px 95px;margin-left:87px;margin-top:40px;border-radius:5px;opacity:0.6;filter:alpha(opacity=);}
.warning{float:right;color:Red;text-decoration:none;font-size:20px;font-weight:bold;margin-right:20px;display:none;}
jquery-1.8.3.min.js
验证码图片绑定 点击自己涮新
<img src="验证吗地址" alt="验证码" height="20" align="bottom" style="cursor:pointer;" title="看不清可单击图片刷新" onclick="this.src='验证吗地址?d='+Math.random();" />
php 弹窗插件的更多相关文章
- Web APP & 弹窗插件
Web APP & 弹窗插件 移动端弹窗插件 alert.confirm.toast.notice 四种类型弹窗 jQuery & Zepto https://github.com/s ...
- jquery弹窗插件layer：layer.layui.com
这两天在做抽奖转盘功能,浏览器自带的alert弹出框太low,本人又基本不会前端, 于是借鉴前人用fancybox插件做的效果 结果没看懂其写法(http://www.0101shop.com/goo ...
- thinkphp 点击某个class提交post值，返回回来用一个弹窗插件，提示返回来要说的话
下一篇文章有讲到弹窗插件的怎么使用,自写教程 如果能帮到你,给点个赞鼓励一下 <============= 控制器 =================> public function ...
- JS编写简单的弹窗插件(含有demo和源码)
最近项目做完了 事情不是很多,今天正好也在调休,所以趁着这个时间研究了一下简易的JS弹窗功能,当然网上这块插件非常多,本人也没有仔细看网上的插件源码 只是凭着日常使用过的弹窗插件有这么多功能 来实现自 ...
- 原生Js弹窗插件|web弹出层组件|对话框
wcPop.js 是一款基于原生javascript开发的前端 web版 弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种 ...
- 支付宝小程序自定义弹窗插件|支付宝dialog插件|model插件
支付宝小程序自定义弹窗组件wcPop|小程序自定义对话框|actionSheet弹窗模板 支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修 ...
- 封装基于jq弹窗插件
相信码友们对于$.fn.extexd();$.extend()以及$.fn.custom和$.custom都有一定的了解:我阐述一下我自己对于$.fn.custom和$.custom的理解.有理解错误 ...
- jquery 弹窗插件 layer
jquery 弹窗插件 layer 官网:http://sentsin.com/jquery/layer/ 1 <!DOCTYPE html PUBLIC "-//W3C//DTD H ...
- Vex – 超轻量！可以轻松自定义的现代风格弹窗插件
Vex 的独特之处在于现代风格设计,能够自定义弹出模式.皮肤.Vex 超轻量,压缩后不到 2KB,提供了简洁的 API,可以根据自己的项目需要快速自定义.支持在移动设备上使用,测试通过的浏览器:IE8 ...
- 自己动手丰衣足食，h5手机端jquery弹窗插件（事件冒泡、单例模式、遮盖部分禁止默认滚动）
感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc ...
随机推荐
- javascript获取css中的样式值
<body> <input type="button" id="btn" value="启动"/> <img ...
- POJ 1065 Wooden Sticks#贪心+qsort用法
(-￣▽￣)-* 这道题用到了cstdlib库的qsort()函数: 用法链接:http://www.cnblogs.com/syxchina/archive/2010/07/29/2197382.h ...
- hdu_5354_Bipartite Graph(cdq分治+并查集判二分图)
题目链接:hdu_5354_Bipartite Graph 题意: 给你一个由无向边连接的图,问对于每一个点来说,如果删除这个点,剩下的点能不能构成一个二分图. 题解: 如果每次排除一个点然后去DFS ...
- 5.Hibernate实现全套增删改查和ajax异步分页
1.1 创建如下oracle数据库脚本 drop sequence seq_stu; create sequence SEQ_STU minvalue maxvalue start increment ...
- c++的输入和输出流
C++编译系统提供了用于输入输出的iostream类库.iostream这个单词是由3个部 分组成的,即i-o-stream,意为输入输出流.在iostream类库中包含许多用于输入输出的 类.常用的 ...
- 抛弃阿里云，中国用户购买海外VPS的五个理由
王掌柜在过去的五年多时间里,折腾过不少vps品牌,最开始玩的是一年一百多块钱的香港虚拟主机,后来业务量大了,开始折腾国内的小鸟云.阿里云.腾讯云.电信云.百度云主机,国外的linode\interse ...
- 不要在 _ASSERT() 宏中执行功能代码 AND RELEASE版调试办法
程序在DEBUG版正常运行,在RELEASE版就崩溃了,想调试找问题,却发现RELEASE版根本走不到断点... 需要在工程配置中将 Configuration Properties- ...
- SDK does not contain any platforms. error (android)
By default sdk was installed under the C:\Users\<user_name>\AppData\Local\Android\sdk\ directo ...
- Linux系统采用netstat命令查看DDOS攻击的方法
Linux系统采用netstat命令查看DDOS攻击的方法 来源:互联网 作者:佚名 时间:07-05 15:10:21 [大 中 小] 这篇文章主要为大家介绍了Linux系统采用netstat命令查 ...
- 安装GlusterFS
Step 1-至少需要两个节点 两个节点安装fedora 20 ,分别为“server1”和“server2” 网络连接 至少两个虚拟磁盘,一个用于OS安装,一个用于支持GlusterFS存储(sdb ...