类似百度的登录弹出框，可用jquery的fadeIn()，hide()，show()，slideDown()等动画函数实现，一下为html5

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <link type="text/css" rel="stylesheet" href="msty.css">

    <script src="jquery-2.2.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

            $(".btn_click").click(function(){

//                alert("hello");

                $(".box_bg").fadeIn(100);

                $(".box_lg").slideDown(200);

            });

            $(".close").click(function(){

                $(".box_bg").fadeOut(100);

                $(".box_lg").hide(100);

            })

        });

    </script>

</head>

<body>

    <div>

        <a class="btn btn-primary btn_click">百度登录框</a>

    </div>

    <div class="box_lg">

        <div class="box_tit">

            <a class="close" href="#">×</a>

            <h3>登录账号</h3>

        </div>  

        <div class="box_cont">

            <form class="box_frm" action="http://www.baidu.com">

                <ol>

                    <li><input type="text" class="ipt" placeholder="学号"/></li>

                    <li><input type="text" class="ipt" placeholder="密码"/></li>

                    <li><input type="submit" value="登录" class="btn btn-primary btn_frm"></li>

                </ol>

            </form>

        </div>

        <div class="box_ft">

            <input type="checkbox" style="margin-right: 8px"><label>下次自动登录</label>

            <a href="#" >立即注册</a>

        </div>

    </div>

    <div class="box_bg"></div>

</body>

</html>

小结：为获取文档元素可以为该元素设置一个空类，由空类名称获取，如上面的获取.close；在写表单的时候可以 放在<ol>和<ul>中，方便对齐格式；在写css时需要对一些东西进行预设，如下：

*{

    padding: 0px;

    margin: 0px;

}

ol,ul{

    list-style:none;

}

a{

    text-decoration: none;

}

input,label{

    vertical-align: middle;

}

注：文章转载出入：http://blog.csdn.net/szu_aker/article/details/50792359

用JQuery写出登录弹出框的更多相关文章

  1. jquery dialog-优雅的弹出框

    前面一章已经对datepicker的使用,做了简单的说明.这一章主要对dialog如何使用做个说明.         jquery ui-dialog在web开发中运用还是比较多的.最常见的例子就是登 ...

  2. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  3. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  4. js登录弹出框插件

    第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...

  5. PLSQL登录弹出空白框如何解决

     转自:http://jingyan.baidu.com/article/066074d6760959c3c21cb0d6.html   出现登录弹出空白框这是由于win7的安全性提高了,在PLSQL ...

  6. html+css源码之实现登录弹出框遮罩层效果

    在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...

  7. javascript的alert()的消息框不弹出或者弹出信息有误

    有时不知道什么,有时javascript的alert()的消息框不弹出或者弹出信息有误,代码是这么写的: //提示信息 public static void alert(TemplateControl ...

  8. jQuery WIN 7透明弹出层效果

    jQuery WIN 7透明弹出层效果,点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度,很不错的一个弹出层插件. 适用浏览器:IE8.360.FireFox.Chrome.Sa ...

  9. jQuery、layer实现弹出层的打开、关闭功能实例详解

    本文主要介绍了jQuery.layer实现弹出层的打开.关闭功能,需要的朋友可以参考下,希望能帮助到大家. 打开弹出层: 在list页面带入layer.js 在list页面点击时,弹出form弹出层, ...

随机推荐

  1. windows下线程库的使用

    下载PTHREAD的WINDOWS开发包 pthreads-w32-2-4-0-release.exe(任何一个版本均可)   http://sourceware.org/pthreads-win32 ...

  2. vue项目 dev正常 build发生错误

    提取错误信息: 这个文件有错误,检查并修改即可 经过排除检查错误地方如下:多了个逗号

  3. React-native Android环境搭建

    基础安装 安装Homebrew Homebrew是Mac OSX的包管理器,我们需要通过Homebrew安装开发React Native的相关软件包. 如果不知道怎样安装Homebrew可以点这里:官 ...

  4. 2018年Java面试题搜集

    2018年Java面试题搜集 一.Servlet执行流程(浏览器访问servlet的过程容器) 客户端发起http请求,web服务器将请求发送到servlet容器,servlet容器解析url并根据w ...

  5. Sybase：获取本月最后一天的日期的实现方法

    Sybase:获取本月最后一天的日期的实现方法 Oracle中查询月底那天的日期的函数为:last_day(). 在ASE中没有对应的函数,在Oracle移植到Sybase的时候,需要手动编写函数来实 ...

  6. 基于Bootstrap的jQuery登录表单

    在线演示 本地下载

  7. 分布式集群Session原理及实现共享

    1.什么是Session/Cookie? 用户使用网站的服务,基本上需要浏览器与Web服务器的多次交互.HTTP协议本身是无状态的,当用户的第一次访问请求结束后,后端服务器就无法知道下一次来访问的还是 ...

  8. D3学习之地图

    D3学习之地图 (2017.03.09-03.11) 地图的意义 在可视化领域中,将数据点投影和关联到地理区域上,是一个非常关键的内容(体现了可视化中利用读者自身知识常识从而加速吸收信息的原则). G ...

  9. Zookeeper初步了解

    Zookeeper初步了解: Zookeeper实现了许多复杂的事情,例如实现了Zookeeper Atomic Broadcasting Protocal来广播状态信息的变化,Fast Paxas ...

  10. IT行业的一些专业术语

    SDK:SDK(Software Development Kit, 即软件开发工具包 )一般是一些被软件工程师用于为特定的软件包.软件框架.硬件平台.操作系统等建立应用软件的开发工具的集合. 参考:h ...