HTML弹窗设计二
<!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弹窗设计二的更多相关文章
- js的命名空间 && 单体模式 && 变量深拷贝和浅拷贝 && 页面弹窗设计
说在前面:这是我近期开发或者看书遇到的一些点,觉得还是蛮重要的. 一.为你的 JavaScript 对象提供命名空间 <!DOCTYPE html> <html> <he ...
- JavaScript 框架设计(二)
JavaScript 高级框架设计 (二) 上一篇,JavaScript高级框架设计(一)我们 实现了对tag标签的选择 下来我们实现对id的选择,即id选择器. 我们将上一篇的get命名为getTa ...
- 游戏UI框架设计(二) : 最简版本设计
游戏UI框架设计(二) --最简版本设计 为降低难度决定先讲解一个最简版本,阐述UI框架的核心设计理念.这里先定义三个核心功能: 1:UI窗体的自动加载功能. 2:缓存UI窗体. 3:窗体生命周期(状 ...
- Redis缓存项目应用架构设计二
一.概述 由于架构设计一里面如果多平台公用相同Key的缓存更改配置后需要多平台上传最新的缓存配置文件来更新,比较麻烦,更新了架构设计二实现了缓存配置的集中管理,不过这样有有了过于中心化的问题,后续在看 ...
- Java秒杀简单设计二:数据库表和Dao层设计
Java秒杀简单设计二:数据库表Dao层设计 上一篇中搭建springboot项目环境和设计数据库表 https://www.cnblogs.com/taiguyiba/p/9791431.html ...
- 四种常见的App弹窗设计,你有仔细注意观察吗?
弹窗又称为对话框,是App与用户进行交互的常见方式之一.弹窗分为模态弹窗和非模态弹窗两种,两者的区别在于需不需要用户对其进行回应.模态弹窗会打断用户的正常操作,要求用户必须对其进行回应,否则不能继续其 ...
- ASP.NET MVC +EasyUI 权限设计(二)环境搭建
请注明转载地址:http://www.cnblogs.com/arhat 今天突然发现博客园出问题了,老魏使用了PC,手机,平板都访问博客园了,都是不能正常的访问,原因是不能加载CSS,也就是不能访问 ...
- APP和服务端-架构设计(二)
1. App架构设计经验谈:接口的设计 App与服务器的通信接口如何设计得好,需要考虑的地方挺多的,在此根据我的一些经验做一些总结分享,旨在抛砖引玉. 1.1 安全机制的设计 现在,大部分App的接口 ...
- WDA演练一:用户登陆界面设计(二)
一,登陆界面设计: 1.将系统编号灰显,默认初值 2.密码栏勾选密码显示,这样就不会明文显示在页面上了: Init方法中添加默认值代码: METHOD wddoinit . DATA lo_nd_zh ...
- GPS部标平台的架构设计(二) 可扩展性设计
在设计的前夕,设计人员喜欢把领导对未来业务的期望带入到设计目标当中,比如当前业务也不过是接入几千辆车,未来业务增长也不过几万台,但领导很多激情,强势要求二期平台的接入能力要达到20万台,这个要求带入到 ...
随机推荐
- PHP面向对象(三)
对象的引用 代码如下: <?php//类的定义以关键字class开始,类的命名通常以每个单词第一个字母大写 class NbaPlayer{ public $name = & ...
- 52道常见Python面试题,你都看过了吗?(转发供参考学习)
https://blog.csdn.net/xiaohei3ge/article/details/88080284?utm_medium=distribute.pc_relevant.none-tas ...
- 挂上burpsuite代理之后显示505 HTTP Version Not Supported 解决方法
505 HTTP Version Not Supported 什么意思呢? HTTP505状态码代表的意思是 服务器不支持的HTTP版本,即 HTTP 505 HTTP Version Not Su ...
- Mac卡顿 CPU占100%的原因Photolibraryd
找到了造成电脑卡顿的元凶,第一步要做的就是杀进程,选中这两个进程,点击上面的结束按钮,世界立马恢复了宁静,高兴的继续码代码,可是好景不长,大约一个小时以后,又特么卡了,"任务管理器" ...
- docker 部署mongodb 并建立用户和授权数据库
docker pull mongo:4.4.8 (拉取镜像) docker run --name mongo -v /data/mongo-data:/data/db -p 27018:27017 - ...
- 解决linux conda 命令行环境提示消失的方法
之前不知道这么搞的,一不小心改了conda的默认设置,后面再登录的时候发现环境名字看不见了,用着很难受,为了解决这个问题,后面发现,应该是我改了changeps1这个设置,他默认是开着的,可以用下面的 ...
- 《CSOL大灾变》Mobile开发记录——武器音效部分
在前端时间开发了武器系统的大部分逻辑,从武器购买界面,武器购买逻辑到游戏逻辑(拾起和丢弃武器)等都开发得差不多了.剩下的仅仅只是增加武器数据(模型,动画和音效,特效等等),然后用统一脚本逻辑定义载入游 ...
- Burp学院-OS命令注入
1.OS command injection, simple case. 最简单的命令执行,[|] 两个只要有一个为True就执行 2.Blind OS command injection with ...
- QT控件使用--QPlainTextEdit
QPlainTextEdit是一个多行文本编辑器,用于显示和编辑多行简单文本. 一些常用的函数有: appendPlainText(const QString) 向 PlainTextEdit 组件添 ...
- Delphi播放铃声
两种方式: 一.简单直接 uses MMSystem; procedure TFmSound.playBtnClick(Sender: TObject); begin PlaySound(PChar( ...