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. springmvc权限拦截器

    配置文件spring-servlet.xml <?xml version="1.0" encoding="UTF-8"?> <beans xm ...

  2. Qt之QTextCodec乱谈

    何处开始呢? 一旦在Qt程序中出现latin1字符集以外的字符,几乎大家无一例外的会用到 QTextCodec. 而不少网友不分青红皂白,一旦用到中文,就同时使用下面3条指令(其中textc 取为 g ...

  3. MSSQL 字符串XML 合成列

    declare @str varchar(2000) set @str='1,2,3,4,6,8,5,9,10,11,12,13,14,15,16,17,18,19,20,29,30,31,32,33 ...

  4. 给postgresql 创建新的用户

    \du 查看当前postgresql的用户,一般此时只能看到 postgres create user ysr superuser password '123456'; \du 就可以看到两个用户了. ...

  5. HUST - 1599 Multiple

    input 长度不大于3*10e5的数字串 output 不含前导0的能整除64的字串的个数(0算一个,064不算) 一般数组中找能整除一个数的字串都是用取余来做的 用一个a[64]来存下从1-i位累 ...

  6. Rar related CMD

    recursively add folder Document to archive: (with all the files) rar a *.rar Document recursively ad ...

  7. Swift 使用Extension 场景 浅析

    别人一看到我的 Swift 代码,立刻就会问我为什么如此频繁的使用 extension.这是前几天在我写的另一篇文章中收到的评论: 我大量使用 extension 的主要目的是为了提高代码可读性.以下 ...

  8. AngularJS 从零开始学习(一)

    什么是AngularJS? AngularJS是一个把HTML(视图)绑定到JavaScript对象(模型)上的框架.当模型改变时,页面也能自动随之更新,反之亦然.当某个域的内容发生变化时,与之关联的 ...

  9. JavaScript的异步机制

    我们经常说JS是单线程的,比如node.js研讨会上大家都说JS的特色之一是单线程的,这样使JS更简单明了,可是大家真的理解所谓JS的单线程机制吗?单线程时,基于事件的异步机制又该当如何 1 先看下两 ...

  10. MaterialWidgetLibrary 学习

    studio项目地址:https://github.com/keithellis/MaterialWidget 修改后的eclipse项目地址: 修改后的eclipse项目 Demo地址: activ ...