1.描述

　　百度登录就是一个模态框弹出层。思路分析：先将灰色大背景和登陆盒子设为不可见，利用JS将其动态加载可见。

2、代码

<!DOCTYPE html>

<html>

  <head>

    <title>模态框弹出层.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <style>

        *{margin:0;padding:0;}

        body{

            width:100%;

            height:10000000px;

        }

        #mask{

            display:none;

            background:rgba(0,0,0,0.3);

            width:100%;

            height:100%;

            position:fixed;//利用固定定位的好处：页面还可以上下翻动，但是始终处于灰色背景下

        }

        #login{

            display:none;

            background:white;

            width:400px;

            height:250px;

            position:absolute;

            left:50%;

            top:50%;

            margin-left:-200px;

            margin-top:-125px;

        }

        #login #close_login{

            position:absolute;

            left:350px;

            top:10px;

            font-size:20px;

            width:20px;

            height:20px;

            background:skyblue;

            cursor:pointer;

        }

    </style>

    <script type="text/javascript">

        window.onload=function(){

            var btn=document.getElementById("btn");

            var mask=document.getElementById("mask");

            var login=document.getElementById("login");

            btn.onclick=function(){

                mask.style.display="block";

                login.style.display="block";

            };

            var close_login=document.getElementById("close_login");

            close_login.onclick=function(){

                mask.style.display="none";

                login.style.display="none";

            };

        };

    </script>

  </head>

  <body>

      <div id="mask"></div>

      <div id="login">

          <span id="close_login">×</span>

      </div>

      <a href="javascript:;" id="btn">请登录</a>

  </body>

</html>

Js实例——模态框弹出层的更多相关文章

  1. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

  2. bootstrap 模态框中弹出层 input不能获得焦点且不可编辑

    bootstrap 模态框中弹出层 input不能获得焦点且不可编辑 问题描述:bs框架支持一层model层的情况下,在模态框中弹出了自定义的弹出层.发现自定义弹出层的输入框不能获得焦点且不可编辑. ...

  3. Asp.net MVC利用Ajax.BeginForm实现bootstrap模态框弹出，并进行前段验证

    1.新建Controller public ActionResult Index() { return View(); } public ActionResult Person(int? id) { ...

  4. 原生Js弹窗插件|web弹出层组件|对话框

    wcPop.js 是一款基于原生javascript开发的前端 web版 弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种 ...

  5. bootstrap删除模态框弹出并询问是否删除【通用删除模态框】

    普通的询问是否删除的对话框比较low,可以利用bootstrap的模态框代替普通的对话框来实现删除. 效果: 点删除的时候弹出模态框询问是否删除,点确认的时候将需要删除的ID传到后台进行删除.  过程 ...

  6. 关于【bootstrap modal 模态框弹出瞬间消失的问题】

    前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...

  7. js,ajax,layer笔记(弹出层,在弹出一个弹框)

    整体认识: 因为作用域的问题,js 在页面初次加载时已近加载好了,所以要有第二次弹窗的效果,必须得在第一次成功之后再次让他加载js 代码: /*shaun*/showdetailsPag: funct ...

  8. js 点击 隐藏弹出层

    document.onmousedown = function(e){ var ev = document.all ? window.event : e; var _con = $("#ci ...

  9. bootstrap中的模态框（modal，弹出层）

    默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...

随机推荐

  1. Nginx配置性能优化与压力测试webbench【转】

    这一篇我们来说Nginx配置性能优化与压力测试webbench. 基本的 (优化过的)配置 我们将修改的唯一文件是nginx.conf,其中包含Nginx不同模块的所有设置.你应该能够在服务器的/et ...

  2. Linux系统的时区和时间调整

     linux调整系统时区: 1)tzselect命令 找到相应的时区文件/usr/share/zoneinfo/Asia/Shanghai,用这个文件替换当前的/etc/localtime文件. 或者 ...

  3. hosts.deny 和hosts.allow 配置不生效

    需求:需要用hosts.deny限制用户通过ssh登录 在/etc/hosts.deny中加入 sshd: all 在/etc/hosts.allow中加入 sshd:all #拒绝所有的ip链接ss ...

  4. linux服务器之LVS、Nginx和HAProxy负载均衡器对比总结

    LVS特点: 1.抗负载能力强,使用IP负载均衡技术,只做分发,所以LVS本身并没有多少流量产生: 2.稳定性.可靠性好,自身有完美的热备方案:(如:LVS+Keepalived) 3.应用范围比较广 ...

  5. Inno Setup入门（二十二）——Inno Setup类参考（8）

    : Install Setup 2013-02-02 11:31 477人阅读 评论(0) 收藏 举报 列表框 列表框(ListBox)是Windows应用程序中重要的输入手段,其中包括多个选项用户可 ...

  6. 转 excel表怎么自动分列

    http://jingyan.baidu.com/article/656db918fc3501e380249c53.html

  7. javaScript 新学习：Array.contains 函数

    Array.contains 函数 确定指定对象是否是 Array 对象中的元素. 此函数是静态的,可在不创建对象实例的情况下调用. var itemExists = Array.contains(a ...

  8. Android OpenGL ES（七）基本几何图形定义 .

    在前面Android OpenGL ES(六):创建实例应用OpenGLDemos程序框架 我们创建了示例程序的基本框架,并提供了一个“Hello World”示例,将屏幕显示为红色. 本例介绍Ope ...

  9. ThreadLocal类及常用的线程安全类探究

    1.ThreadLocal类 ThreadLocal是Thread Local Variable的简称,意思是线程局部变量.作用是为每一个使用该变量的线程都提供一个该变量的副本,使每一个线程都能独立操 ...

  10. java 常见异常总结

    异常1:java.util.NoSuchElementException: No line found 原因:Java 是顺序执行的 你执行到.close() 后就代表 你关闭了 流,你再去调用已经被 ...