类似百度的登录弹出框，可用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. 在linux下打开文件出现^M，^H

    0 Problem 在服务器上跑keras实验,然后用tee指令把实验结果保存在文本文件中. 文本文件在本机linux下用vim打开文件时会出现^M,^H.用sublime打开也会出现奇怪的字符. 1 ...

  2. Linux 搭建 SVN

    一.yum 安装 subversion yum -y install subversion 二.创建svn版本库所在路径(建议放在opt.usr.home下) mkdir -p /usr/local/ ...

  3. Linux安装字体文件

    登录生成验证码的时候使用了monaco.ttf字体,没有安装字体的情况下,会报错:can't open resource Linux安装字体的方式其实很简单,就是调用fc-cache -f -v命令, ...

  4. netbeans等宽字体却不支持中文

    一直用netbeans,各方面都很满意,就是这字体十分不爽,如用等宽字体却不支持中文,百度了一下,找到了解决办法,贴出来,给需要的朋友. 01.找到自己java字体目录.我的目录是[C:\Progra ...

  5. Spring混合配置

    Spring混合配置 一.在JavaConfig中引入其他配置 在JavaConfig中引入JavaConfig配置 使用@Import({OtherConfig1.class,OtherConfig ...

  6. 64位机的pl/sql不安装32位oracle的连接方式

    第一步:下载即时客户端包    在Oralce官方网站上下载Oracle Instantclient Basic package.地址如下:http://www.oracle.com/technetw ...

  7. windchill系统——开发_客户端自定义

    步骤如下

  8. POJ - 2785 - 4 Values whose Sum is 0 - 二分折半查找

    2017-08-01 21:29:14 writer:pprp 参考:http://blog.csdn.net/piaocoder/article/details/45584763 算法分析:直接暴力 ...

  9. Android -- UI布局管理，相对布局，线性布局，表格布局，绝对布局，帧布局

    1. 相对布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmln ...

  10. java8 函数接口 Predicate例子

    import java.util.HashSet; import java.util.Collection; import java.util.function.Predicate; public c ...