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. style控制打印分页

    [转载地址:http://www.cnblogs.com/JustinYoung/articles/710734.html]page-break-before和page-break-after CSS ...

  2. IOS抓包工具paros的使用

    一,环境安装,软件安装 1.下载安装java JDK for Mac,可以从Oracle官网下载(但是一般Oracle的都是最新的版本的),或者从苹果的开发者网站下载,我是从苹果官网下载的javafo ...

  3. sqlQuery.list()方法返回类型

    SQLQuery sqlQuery = session.createSQLQuery(this.sql.toString()); List<Object[]> list = (List&l ...

  4. 使WiFi具有保存历史连接的功能

    在wpa_supplicant.conf里面添加这个功能 update_config=1 就能更新了,保存了历史的连接AP,不用再输入密码

  5. JS动态引入js、CSS动态创建script/link/style标签

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.create ...

  6. Jquery的parent和parents(找到某一特定的祖先元素)

    关于Jquery的parent和parents parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合.parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可以 ...

  7. linux command----vi

    vi命令是UNIX操作系统和类UNIX操作系统中最通用的全屏幕纯文本编辑器.Linux中的vi编辑器叫vim,它是vi的增强版(vi Improved),与vi编辑器完全兼容,而且实现了很多增强功能. ...

  8. CodeForces 681C Heap Operations（模拟）

    比较简单的模拟,建议使用STL优先队列. 代码如下: #include<iostream> #include<cstdio> #include<cstring> # ...

  9. 学习笔记——原型模式Prototype

    原型模式,简单说就是具有一个克隆方法,外部可以直接使用此方法得到相应对象的拷贝对象. 比如哆啦A梦的复制镜,一照,就把物品拷贝了一份(虽然是镜子复制是相反的,这里就忽略这个细节了) C++中依靠拷贝构 ...

  10. andorid 自定义view属性declare-styleable

    1. reference:参考某一资源ID. (1)属性定义: <declare-styleable name = "名称"> <attr name = &quo ...