类似百度的登录弹出框，可用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. 新建Maven项目时出错：org.apache.maven.archiver.MavenArchiver.getManifest

    新建Maven项目时出错:org.apache.maven.archiver.MavenArchiver.getManifest eclipse新建maven项目时,pom.xml文件第一行报错: o ...

  2. ie9下面的console的bug

    摘自:http://blog.csdn.net/cdnight/article/details/51094464 ie9下面,很奇怪的是有console的代码有时候执行不下去,不过当f12打开控制台的 ...

  3. 【Head First Servlets and JSP】笔记23：Expression Language(EL) 完全攻略

    基本上是<Head First Servlets and JSP>内容的整理.扩充.顺便推荐一个供参考的JSP教程:JSP Tutorial内容很全面,还有一些有趣的实例. 完整代码参考 ...

  4. LVS持久化

    在实际应用场景中,轮询调度并不都是适用的.有些情况下,需要我们把同一个会话的请求都调度给一个RS节点.这时候就需要LVS提供持久化的能力,能够实现会话保持. 一.LVS的持久化主要包括以下两个方面. ...

  5. MySQL-5.7 创建及查看触发器

    触发器的作用是当表上有对应SQL语句发生时,则触发执行. 1.语法 CREATE [DEFINER = { user | CURRENT_USER }] TRIGGER trigger_name tr ...

  6. MySQL-5.7密码策略及用户资源限制

    1.密码策略 在mysql 5.6对密码的强度进行了加强,推出了validate_password 插件.支持密码的强度要求. (1)安装插件 [root@localhost ~]# ll /usr/ ...

  7. python之模块导入和重载

    模块导入和重载 模块导入通过import语句实现,但是在同一次会话中只运行一次. 若想要再次运行文件,调用imp标准库中的reload函数: >>> from imp import ...

  8. Java学习笔记50：JSONObject与JSONArray的使用（转）

    Java不像PHP解析和生产JSON总是一个比较痛苦的过程.但是使用JSONObject和JSONArray会让整个过程相对舒服一些. 需要依赖的包:commons-lang.jar commons- ...

  9. iOS开发进阶 - 使用Carthage管理iOS第三方库

    移动端访问不佳,请访问我的个人博客 最近在研究Swift,一不小心发现一个好的的管理iOS第三方库Carthage,就跟第一次使用CocoaPods时一样兴奋不已,在研究了大半天后终于能用了,使用起来 ...

  10. sed 案例

    sed:Stream Editor文本流编辑,sed是一个“非交互式的”面向字符流的编辑器.能同时处理多个文件多行的内容,可以不对原文件改动,把整个文件输入到屏幕,可以把只匹配到模式的内容输入到屏幕上 ...