类似百度的登录弹出框，可用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. VMWare 网络连接模式(bridged、NAT、host-only)详解

    转自VMWare 网络连接模式(bridged.NAT.host-only)详解 host-only 在某些特殊的网络调试环境中,如何要求将真实环境和虚拟环境隔离开,这时你就可采用host-only模 ...

  2. Web开发相关笔记

    1.MySQL命令行下执行.sql脚本详解http://database.51cto.com/art/201107/277687.htm 在可视化工具里导出.sql脚本 --> 放命令行里运行 ...

  3. 高亮显示UILabel中的子串

    I. 用户在搜索框中,输入关键字进行检索时,APP对搜索结果进行显示,有以下两种情况: 1. 匹配一次,如检索关键字为人名 这种情况,实现比较容易.写一个UILabel的category, 用rang ...

  4. 使用mysqldump迁移数据

    1. 先停止业务,使用MySQLdump的数据导出工具,将您线下原有数据库数据导出为数据文件 mysqldump -hlocalhost -uroot --default-character-set= ...

  5. TF卡.购买（20180925）

    1.准备买 2个 一个 用于 老的手机"红米Note",一个用于现在我的手机"红米Note4X". 之前,这2个手机都是用的 那个坏掉的64g的tf卡 2.刚问 ...

  6. hibernate学习（4）

    Hibernate查询方式 1 对象导航查询 (1)根据id查询某个客户,再查询这个客户里面所有的联系人 2 OID查询 (1)根据id查询某一条记录,返回对象 3 hql查询 (1)Query对象, ...

  7. activity启动模式之singleTask

    activity启动模式之singleTask 一.简介 如果另外一个应用调用了C2,C2在栈底,如果这个程序里面再嗲用C1,C3,C2,那么这个C2就是调用onNewIntant的,C1和C3都被销 ...

  8. PHP使用前的了解

    PHP简介 PHP 是什么? PHP(全称:PHP:Hypertext Preprocessor,即"PHP:超文本预处理器")是一种通用开源脚本语言. PHP 脚本在服务器上执行 ...

  9. python函数式编程之返回函数、匿名函数、装饰器、偏函数学习

    python函数式编程之返回函数 高阶函数处理可以接受函数作为参数外,还可以把函数作为结果值返回. 函数作为返回值 def laxy_sum(*args): def sum(): ax = 0; fo ...

  10. Xcode删除无用的Symbols信息

    open ~/Library/Developer/Xcode/iOS\ DeviceSupport 进入后对不需要的版本手动Delete.