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. JavaScript焦点事件、鼠标事件和滚轮事件使用详解

    网址:http://www.jb51.net/article/78094.htm

  2. JSP基本语法--包含指令<%@include file="路径"%> <jsp:include page>

    包含指令,真正改变的地方只有具体内容处: 方法1: 在每个jsp页面(HTML)都包含工具栏,头部信息,尾部信息,具体内容 方法2: 将工具栏,头部信息,尾部信息都分成各个独立的文件,使用的时候直接导 ...

  3. .project

    http://blog.csdn.net/qiushuichangtian888/article/details/9299843 一个老项目导入新环境后老是提示build.properties不存在的 ...

  4. MySQL与Oracle的区别

    1.语法上的区别 变量类型定义.IN  OUT的位置.变量定义的位置.游标的位置.异常的位置: 2.MySQL没有 return 关键字,采用leave label的方式结束循环或跳出存储 3.异常处 ...

  5. [maven] 新建项目一直提示loading archetype list

    Maven's JRE is running out of memory. Under Build > Build Tools > Maven > Importing, set &q ...

  6. //获取url中"?"符后的字串

    //获取url中"?"符后的字串 function getParamByUrl(url) {    var theRequest = new Object();    var in ...

  7. Got Stucked in C++ Static Library Loading.. for some time

    I used to load library using 1 single .dll file, so when I happen to do method calling between 2 pro ...

  8. GameUnity 2.0 文档（二） 纸片人系统

    本想快速的 把 之前写的类库,一股脑的 给大家 ,但又觉得,如 msdn那样的 文档,并不能给 初学者 所能接受. 因为 大部分人 对 api 还是比较陌生,也不愿意 去研究和组合. 那么 今天我选用 ...

  9. angular.js之路由的选择

    在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块.模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的. 乍一看非常普通的东西 ...

  10. socket常见几种异常

    第1个异常是 java.net.BindException:Address already in use: JVM_Bind. 该异常发生在服务器端进行newServerSocket(port)(po ...