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

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

验证码图片绑定点击自己涮新

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

随机推荐

Ubuntu shortcuts
Ubuntu shortcuts 打开系统管理器 gnome-system-monitor
Gentoo解决Udev升级的网卡重命名问题
问题描述: 配置网络时,很多新手运行ifconfig命令查看网卡时,会发现我们熟悉的eth0网卡没有了,或是发现一些不规则命名的东东,不错,那就是你的网卡. 因为内核升级(忘记具体哪个版本了)从ude ...
第二次冲刺spring会议（第三次会议）
[例会时间]2014/5/6 21:15 [例会地点]9#446 [例会形式]轮流发言 [例会主持]马翔 [例会记录]兰梦小组成员:兰梦 ,马翔,李金吉,赵天,胡佳奇
神经网络工具箱nntool的使用方法
关于如何使用nntool神经网络工具箱进行“数据训练”的方法: 1. 在命令窗口键入nntool命令打开神经网络工具箱: 2. 点击Import按钮两次,分别把输入向量和目标输出加入到对应的窗口([I ...
qq昵称由fly改为思诺
刚才,把高三申请的qq号,昵称fly 改为思诺,英文名称为saynoer,say+no+er, 意思你懂的.
鼠标滚动事件 - onmousewheel
1.Jquery-MouseWheel jquery默认是不支持支持鼠标滚轮事件(mousewheel) jquery MouseWheel下载:https://github.com/jquery/j ...
do循环的100米自由落体
#include "stdio.h" void main() { float h=100.0,sum=100.0; ; do { sum=sum+h; h=h/; g++; }); ...
chrome浏览器调试工具的使用
废话不多说,给大家介绍一下最基本的浏览器调试工具
SVN的学习以及使用！
什么是版本控制? 版本控制是记录一个或若干文件内容变化的系统.以便将来查阅特定版本修订情况. 版本控制,就像是一本历史书,记录了软件版本的迭代过程. 为什么需要"版本控制" 需要清 ...
linux设置时间服务器
对多个linux服务器,时间保持一致是很必要的.根据精确度要求,应该有相应的时间间隔进行时间同步.如果不进行时间同步,时间久了就会差别很大,遇到问题时定位就很困难.因为多台设备的配合,log之间可能有 ...

php 弹窗插件

php 弹窗插件的更多相关文章

随机推荐

热门专题