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

            密&nbsp;&nbsp;&nbsp;&nbsp;码: <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 弹窗插件的更多相关文章

  1. Web APP & 弹窗插件

    Web APP & 弹窗插件 移动端弹窗插件 alert.confirm.toast.notice 四种类型弹窗 jQuery & Zepto https://github.com/s ...

  2. jquery弹窗插件layer：layer.layui.com

    这两天在做抽奖转盘功能,浏览器自带的alert弹出框太low,本人又基本不会前端, 于是借鉴前人用fancybox插件做的效果 结果没看懂其写法(http://www.0101shop.com/goo ...

  3. thinkphp 点击某个class提交post值，返回回来用一个弹窗插件，提示返回来要说的话

    下一篇文章有讲到弹窗插件的怎么使用,自写教程 如果能帮到你,给点个赞鼓励一下 <=============  控制器  =================> public function ...

  4. JS编写简单的弹窗插件(含有demo和源码)

    最近项目做完了 事情不是很多,今天正好也在调休,所以趁着这个时间研究了一下简易的JS弹窗功能,当然网上这块插件非常多,本人也没有仔细看网上的插件源码 只是凭着日常使用过的弹窗插件有这么多功能 来实现自 ...

  5. 原生Js弹窗插件|web弹出层组件|对话框

    wcPop.js 是一款基于原生javascript开发的前端 web版 弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种 ...

  6. 支付宝小程序自定义弹窗插件|支付宝dialog插件|model插件

    支付宝小程序自定义弹窗组件wcPop|小程序自定义对话框|actionSheet弹窗模板 支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修 ...

  7. 封装基于jq弹窗插件

    相信码友们对于$.fn.extexd();$.extend()以及$.fn.custom和$.custom都有一定的了解:我阐述一下我自己对于$.fn.custom和$.custom的理解.有理解错误 ...

  8. jquery 弹窗插件 layer

    jquery 弹窗插件 layer 官网:http://sentsin.com/jquery/layer/ 1 <!DOCTYPE html PUBLIC "-//W3C//DTD H ...

  9. Vex – 超轻量！可以轻松自定义的现代风格弹窗插件

    Vex 的独特之处在于现代风格设计,能够自定义弹出模式.皮肤.Vex 超轻量,压缩后不到 2KB,提供了简洁的 API,可以根据自己的项目需要快速自定义.支持在移动设备上使用,测试通过的浏览器:IE8 ...

  10. 自己动手丰衣足食，h5手机端jquery弹窗插件（事件冒泡、单例模式、遮盖部分禁止默认滚动）

    感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc ...

随机推荐

  1. WiMAX协议栈

    1.协议栈模型 协议栈模型将 WiMAX 系统分为数据控制平面和管理平面两个平面 数据控制平面对数据的正确传输进行保证,包括封装.分片.加密.解封装等 基站与用户站之间的特定信令交互完成系统的控制功能 ...

  2. 简单的Socket通信

    Socket简介 Socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求. 服务端步骤: • socket:创建服务器socket ...

  3. LeetCode OJ 74. Search a 2D Matrix

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  4. NOIP2011-普及组复赛模拟试题-第二题-买票

    题目背景 Background Ztc真的遇上黄牛了...  题目描述 Description   周末Ztc想去剧场看演出,但是他没有票.这时,救世主Wzj出现了,他慷慨地愿意卖给Ztc一些票.   ...

  5. NOIP2002-普及组复赛-第三题-选数

    题目描述 Description 已知 n 个整数 x1,x2,…,xn,以及一个整数 k(k<n).从 n 个整数中任选 k 个整数相加,可分别得到一系列的和.例如当 n=4,k＝3,4 个整 ...

  6. Visual Studio 2013 新增web项目IIS Express的64位版 　　转载来源http://www.cnblogs.com/jianyus/p/3524335.html

    使用Visual Studio 2012开发SharePoint的应该都遇到过下面的错误“SharePoint 在32位进程中不受支持”,而怎么修改目标平台都不好使,因为VS 2012所配备的IIS ...

  7. VMware 下的Linux系统远程连接putty

    ifconfig查看ip地址 虚拟网卡需要自己新建  nat8 putty不能显示中文的解决办法 http://jingyan.baidu.com/article/5552ef47df8a97518f ...

  8. 【开发笔记】java.lang.NoClassDefFoundError: org/aopalliance/intercept/MethodInterceptor

    在进行"spring的声明式事务管理配置"的时候,抛出该异常. 错误原因: 缺少aopalliance.jar包. 事务管理配置如下: <!-- #######5.sprin ...

  9. 正则表达式 Pattern & Matcher

    1 compile and pattern Pattern类用于创建一个正则表达式,也可以说创建一个匹配模式,它的构造方法是私有的,不可以直接创建,但可以通过Pattern.complie(Strin ...

  10. mybatis结合redis实战二级缓存（六）

    之前的文章中我们意见分析了一级缓存.二级缓存的相关源码和基本原理,今天我们来分享下了mybatis二级缓存和redis的结合,当然mybatis二级缓存也可以和ehcache.memcache.OSC ...