<!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">
<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>
11111111111111111111
</div>
<a href="javascript:;" id="btn">请登录</a>
</body>
</html>

HTML弹窗设计二的更多相关文章

  1. js的命名空间 && 单体模式 && 变量深拷贝和浅拷贝 && 页面弹窗设计

    说在前面:这是我近期开发或者看书遇到的一些点,觉得还是蛮重要的. 一.为你的 JavaScript 对象提供命名空间 <!DOCTYPE html> <html> <he ...

  2. JavaScript 框架设计(二)

    JavaScript 高级框架设计 (二) 上一篇,JavaScript高级框架设计(一)我们 实现了对tag标签的选择 下来我们实现对id的选择,即id选择器. 我们将上一篇的get命名为getTa ...

  3. 游戏UI框架设计(二) : 最简版本设计

    游戏UI框架设计(二) --最简版本设计 为降低难度决定先讲解一个最简版本,阐述UI框架的核心设计理念.这里先定义三个核心功能: 1:UI窗体的自动加载功能. 2:缓存UI窗体. 3:窗体生命周期(状 ...

  4. Redis缓存项目应用架构设计二

    一.概述 由于架构设计一里面如果多平台公用相同Key的缓存更改配置后需要多平台上传最新的缓存配置文件来更新,比较麻烦,更新了架构设计二实现了缓存配置的集中管理,不过这样有有了过于中心化的问题,后续在看 ...

  5. Java秒杀简单设计二：数据库表和Dao层设计

    Java秒杀简单设计二:数据库表Dao层设计 上一篇中搭建springboot项目环境和设计数据库表  https://www.cnblogs.com/taiguyiba/p/9791431.html ...

  6. 四种常见的App弹窗设计,你有仔细注意观察吗?

    弹窗又称为对话框,是App与用户进行交互的常见方式之一.弹窗分为模态弹窗和非模态弹窗两种,两者的区别在于需不需要用户对其进行回应.模态弹窗会打断用户的正常操作,要求用户必须对其进行回应,否则不能继续其 ...

  7. ASP.NET MVC +EasyUI 权限设计(二)环境搭建

    请注明转载地址:http://www.cnblogs.com/arhat 今天突然发现博客园出问题了,老魏使用了PC,手机,平板都访问博客园了,都是不能正常的访问,原因是不能加载CSS,也就是不能访问 ...

  8. APP和服务端-架构设计(二)

    1. App架构设计经验谈:接口的设计 App与服务器的通信接口如何设计得好,需要考虑的地方挺多的,在此根据我的一些经验做一些总结分享,旨在抛砖引玉. 1.1 安全机制的设计 现在,大部分App的接口 ...

  9. WDA演练一：用户登陆界面设计(二)

    一,登陆界面设计: 1.将系统编号灰显,默认初值 2.密码栏勾选密码显示,这样就不会明文显示在页面上了: Init方法中添加默认值代码: METHOD wddoinit . DATA lo_nd_zh ...

  10. GPS部标平台的架构设计(二) 可扩展性设计

    在设计的前夕,设计人员喜欢把领导对未来业务的期望带入到设计目标当中,比如当前业务也不过是接入几千辆车,未来业务增长也不过几万台,但领导很多激情,强势要求二期平台的接入能力要达到20万台,这个要求带入到 ...

随机推荐

  1. JAVA-GUI创作学校管理系统

    1.对于学校的管理系统,我们先做一个简单的一个需求分析,我们需要做学生信息管理,教师信息管理,课程的信息管理.我们要根据自己的需求进行数据库的编写. 简单的添加了几个 2.然后我们通过eclipse+ ...

  2. Tensorflow1.0版本与以前函数不同之处

    大部分是Api版本问题: AttributeError: 'module' object has no attribute 'SummaryWriter' tf.train.SummaryWriter ...

  3. function的length，就是第一个具有默认值之前的参数个数。

    一个拥有 length 属性和若干索引属性的对象就可以被称为类数组对象,类数组对象和数组类似,但是不能调用数组的方法.常见的类数组对象有 arguments 和 DOM 方法的返回结果,还有一个函数也 ...

  4. windows mongo 开启副本集 6.x版本 mongo : 无法将“mongo”项识别为 cmdlet、函数、脚

    mongo报错 当前使用版本6.0.3,bin目录下并没有mongo.exe,所以没有mongo命令, 需要下载 https://www.mongodb.com/try/download/shell  ...

  5. Eclipse-Hadoop开发配置详解

    Eclipse_Hadoop开发详解 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockqu ...

  6. 力扣（leetcode）题库0001-python3

    试一下leetcode的题库,不知道对于我这种小白要多长时,但是目标已经种下,去做就是了.You can do anything you set your mind to. 题目:题库链接 中:给定一 ...

  7. 均值、中值、高斯、non-local means算法详解

    文章仅为个人理解,如有不妥之处欢迎指正. 写几个常见的图像去噪滤波器. 1.均值滤波器 均值滤波器是最简单的图像平滑滤波器,其3*3的模板为 1 9 [ 1 1 1 1 1 1 1 1 1 ] \fr ...

  8. java后台接收参数为枚举，postman的json如何传入

    使用postman测试接口,其中一个参数为枚举类型,如何传入参数? 1 枚举类型: public enum UserCourseOrderSourceType{ USER_BUY(1,"用户 ...

  9. Linux 第十二节(samba NFS )

    samba     跨平台共享,基于smb协议. NFS yum install samba cd /etc/samba   //samba配置文件 mv smb.conf smb.conf_bak  ...

  10. Neo4J之Cypher 第三章

    Cypher是一种声明式图形查询语言,可用于表达性和高效的图形查询和更新.它旨在同时适合开发人员和运营专业人员.Cypher的设计既简单又强大.可以轻松表达高度复杂的数据库查询,使您可以专注于自己的域 ...