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. postgres 数据库备份恢复

    postgre 数据库备份恢复命令 备份:pg_dump -U postgres -v -F c -Z 4 -f ***.backup dbname  9压缩率最狠恢复:pg_restore -U p ...

  2. Ansible9：条件语句【转】

    在有的时候play的结果依赖于变量.fact或者是前一个任务的执行结果,从而需要使用到条件语句. 一.when    有的时候在特定的主机需要跳过特定的步骤,例如在安装包的时候,需要指定主机的操作系统 ...

  3. Fibonacci 数列第 N项 O(logN）算法

    时间复杂度为O( log n )的方法: 该算法使用矩阵乘法操作,使得算法时间复杂度为 O(logN) long long Fibonacci( unsigned n ) { ] = {, }; ) ...

  4. js操作select和option

    1.动态创建select function createSelect(){ var mySelect = document.createElement_x("select"); m ...

  5. vim 操作（转）

    高效率移动编辑1.在插入模式之外基本上来说,你应该尽可能少的呆在插入模式里面,因为在插入模式里面 VIM 就像一个“哑巴”编辑器一样.很多新手都会一直呆在插入模式里面,因为这样易于使用.但 VIM 的 ...

  6. UICollectionView 浅析

    什么是UICollectionView UICollectionView是一种新的数据展示方式,简单来说可以把他理解成多列的UITableView(请一定注意这是UICollectionView的最最 ...

  7. java 数据结构 图

    以下内容主要来自大话数据结构之中,部分内容参考互联网中其他前辈的博客,主要是在自己理解的基础上进行记录. 图的定义 图是由顶点的有穷非空集合和顶点之间边的集合组成,通过表示为G(V,E),其中,G标示 ...

  8. [转]Android 如何对sqlite数据库进行增删改[insert、update和delete] 操作

    import android.content.ContentValues; import android.content.Context; import android.database.Cursor ...

  9. 使用NGUI进行类似Button的操作

    下面例子以Label和Sprite为例,进行说明如何在NGUI中对控件添加单击响应的事件方法. 首先在UIRoot下添加Label控件,然后Scene场景中右键Label-->Attach--& ...

  10. hdu_1007_Quoit Design(最近点对)

    题目连接:hdu_1007_Quoit Design 题意: 给你平面上的一些点,让你找出这些点的最近点对的距离 题解: 采用分治,达到O(nlognlogn)的时间复杂度就能艹过去了 #includ ...