类似百度的登录弹出框，可用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. SpringBoot之Servlet、Filter、Listener配置

    在SpringBoot中是不需要配置web.xml的,那么原来在web.xml中配置的Servlet.Filter.Listener现在怎么弄呢? SpringBoot提供了三种Bean Filter ...

  2. Json日期格式 转化为 YYYY-MM-DD-hh-mm-ss

    function timeStamp2String(time) { var datetime = new Date(); datetime.setTime(time); var year = date ...

  3. Hadoop：相关概念

    Hadoop:相关概念 一.Hadoop简介 Hadoop实现了一个分布式文件系统(Hadoop Distributed File System),简称HDFS. 1.特点 (1)HDFS有高容错性的 ...

  4. 20145219 《Java程序设计》第09周学习总结

    20145219 <Java程序设计>第09周学习总结 教材学习内容总结 JDBC入门 JDBC简介 1.JDBC是java联机数据库的标准规范,它定义了一组标准类与接口,应用程序需要联机 ...

  5. Cocos2d-x项目移植到WP8系列之九：使用自定义shader

    本文原链接:http://www.cnblogs.com/zouzf/p/3995132.html 有时候想得到一些例如灰度图等特殊的渲染效果,就得用到自定义shader,关于shader的一些背景知 ...

  6. 编写基本的 udev 规则

    来自: https://linux.cn/article-9365-1.html?utm_source=index&utm_medium=more 读者对象 理解 udev 背后的基本概念,学 ...

  7. DRBD分布式块设备复制

    一. DRBD介绍 1.1.数据镜像软件DRBD介绍分布式块设备复制(Distributed Relicated Block Deivce,DRBD),是一种基于软件.基于网络的块复制存储解决方案,主 ...

  8. 浅谈MySQL中优化sql语句查询常用的30种方法 - 转载

    浅谈MySQL中优化sql语句查询常用的30种方法 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中使 ...

  9. gitlab 备份

    gitlab 备份 gitlab-rake gitlab:backup:create 执行之后,就会生成一个备份文件 [root@iZuf6dztc469onegfborf5Z backups]# l ...

  10. [转]类不平衡问题与SMOTE过采样算法

    在前段时间做本科毕业设计的时候,遇到了各个类别的样本量分布不均的问题——某些类别的样本数量极多,而有些类别的样本数量极少,也就是所谓的类不平衡(class-imbalance)问题. 本篇简述了以下内 ...