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 ...
随机推荐
- 1.Hibernate框架核心组件 (转自冯岩)
Hibernate框架核心组件 在Hibernate框架简述中,演示了一个简单的Hibernate应用,但并没有深入说明其中程序,在这篇中将比较详细的介绍一下Hibernate的核心组件.首先最关键一 ...
- Django中Admin样式定制
Django自带的admin在展示数据是样式有点单一,我们可以自己定义数据的展示样式. 一.自定义数据展示样式 1.后台查询书记列表时,同时列出出版社和出版时间: admin.py文件 from dj ...
- informix建临时表索引
对于特殊字段,比如外键,主键,在不知道外键主键名的情况下,需要如下操作select constrname from sysconstraints where constrtype='R' and ta ...
- 推荐学习c语言的几个开源项目
1. Webbench Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的性能,最多可以模拟3万个并发连 ...
- chapter9_1 协同程序
协同程序与线程差不多,也就是一条执行序列:有自己独立的栈.局部变量.指令指针,以及和其他协同程序共享的全局变量和其他大部分东西. 两者区别在于:一个多线程的程序可以同时运行几个线程,而协同程序却需要彼 ...
- dbg调试
一.启动停止dbg dbg:tracer(). dbg:stop(). 二.跟踪常用函数 1.跟踪进程 dbg:p(PidSpec,TraceFlags). PidSpec Pid 一个特定进程ID ...
- 华中农业大学新生赛C题
http://acm.hzau.edu.cn/problem.php?id=1099 题意: 输入两个整数 l 和 n,代表半径和output的保留小数点位数. 输出圆的面积,保留n位小数. 一开始觉 ...
- Adobe flash CC 汉化破解方法
转载整理自:http://www.sdifenzhou.com/flashprofessionalcc.html 断网,解压下载的破解dmg文件得到这些文件 第一步,解压安装包,安装,并打开,不要输入 ...
- webupload-upload执行上传时，进入的路径与linux服务器上的不一致
将if判断处改为garage即可. 原因是因为if处判断处理没有执行,因为要需要把从garage开始的到后面的字符串都去掉才行 不然:local=http://www.xxx.com/garage s ...
- Copy Constructor的构造操作
Copy Constructor的构造操作 有三种情况,会以一个object的内容作为另一个class object的初值: 1. 对一个object做显式的初始化操作 class X{…}; X ...