<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}

.mask {
width: 100%;
/*height: 500px;*/
position: fixed;
top: 0px;
left: 0px;
background-color: black;
opacity: 0.5;
}

.show {
width: 500px;
height: 300px;
position: fixed;
top: 100px;
left: 300px;
background-color: white;
z-index: 999;
}
</style>
</head>

<body>
<!--遮罩层-->
<div class="mask" hidden="hidden"></div>
<!--弹出层-->
<div class="show" hidden="hidden">

</div>
<input type="button" value="点 出 来" onclick="show_plus()" />

</body>

</html>
<script>
var mask = document.getElementsByClassName('mask')[0];
var show = document.getElementsByClassName("show")[0];

var c_height = document.documentElement.clientHeight;
var c_width = document.documentElement.clientWidth;

mask.style.height = c_height + "px";
show.style.left = c_width / 2 - 250 + "px";
show.style.top = c_height / 2 - 150 + "px";

function show_plus() {
mask.removeAttribute("hidden");
show.removeAttribute("hidden");
}

mask.onclick = function() {
mask.setAttribute("hidden", "hidden");
show.setAttribute("hidden", "hidden");
}

window.onresize = function() {
var c_height = document.documentElement.clientHeight;
var c_width = document.documentElement.clientWidth;

mask.style.height = c_height + "px";
show.style.left = c_width / 2 - 250 + "px";
show.style.top = c_height / 2 - 150 + "px";
}
</script>

js特效遮罩层（弹出层）的更多相关文章

  1. Js实例——模态框弹出层

    1.描述 百度登录就是一个模态框弹出层.思路分析:先将灰色大背景和登陆盒子设为不可见,利用JS将其动态加载可见. 2.代码 <!DOCTYPE html> <html> < ...

  2. 原生Js弹窗插件|web弹出层组件|对话框

    wcPop.js 是一款基于原生javascript开发的前端 web版 弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种 ...

  3. js弹出div层,弹出层页面底部出现UL出现一条线问题

    整个弹出div层,列表满一页时:底部会出现一条横线 原因:ul固定写在页面中了 解决方法: 将ul代码与li列表一样写在js中,如下 var newhtml = '<ul class=" ...

  4. js,ajax,layer笔记(弹出层,在弹出一个弹框)

    整体认识: 因为作用域的问题,js 在页面初次加载时已近加载好了,所以要有第二次弹窗的效果,必须得在第一次成功之后再次让他加载js 代码: /*shaun*/showdetailsPag: funct ...

  5. js 点击 隐藏弹出层

    document.onmousedown = function(e){ var ev = document.all ? window.event : e; var _con = $("#ci ...

  6. js实现遮罩以及弹出可移动登录窗口

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js弹出层的写法实例

    点击后弹出界面,通过判断浏览器长宽自动设定页面宽度和登陆页面位置. <style> /*遮罩层 弹出层*/ .mask { width: 100%; background-color: r ...

  8. js进阶 11-20 弹出层如何制作

    js进阶 11-20 弹出层如何制作 一.总结 一句话总结:其实就是一个div,控制显示和隐藏即可.设置成绝对定位更好,就可以控制弹出层出现的位置.关闭的画质需要将display重新设置为none就好 ...

  9. 【JS新手教程】弹出两层div，及在LODOP内嵌上层

    前面的博文有个简单的弹出div层[JS新手教程]浏览器弹出div层1,有一层,不过为了提示,一般会不让用户可以点击该提示之外的地方的.如果让用户弹出层后,把其他的按钮和链接都设置不可用应该比较麻烦,如 ...

  10. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

随机推荐

  1. 一次FCK拿bc全过程

    和大家简单的弄下fckeditor 漏洞在红客我看到好多人对fck 这个漏洞很干兴趣 其实这个漏洞这的很老了 也非常好利用  我也扫了一点fck的漏洞网址  下面我们就来打开一个我们看看这个一号站平台 ...

  2. 转每天一个linux命令（7）：mv命令

    mv命令是move的缩写,可以用来移动文件或者将文件改名(move (rename) files),是Linux系统下常用的命令,经常用来备份文件或者目录. 1．命令格式: mv [选项] 源文件或目 ...

  3. 【javascript】详解变量，值，类型和宿主对象

    前言 我眼中的<javascript高级程序设计> 和<你不知道的javascript>是这样的:如果<javascript高级程序设计>是本教科书的话, < ...

  4. Jquery笔记之第一天

    1.使用Jquery 方法一:下载JQuery 方法二:使用CDN内容分发网络 常用的国内CDN: 百度:<script src="https://apps.bdimg.com/lib ...

  5. 关于C#开发 windows服务进程

    最近在做一个物联网项目,其中有一个模块是需要实现热水工程的自动化补水和回水功能 实现的方式有多种,我选用了VS C#的Windows服务方式. 首先是创建一个windows服务项目(名称随你喜欢的规范 ...

  6. C++三种野指针及应对／内存泄露

     野指针,也就是指向不可用内存区域的指针.如果对野指针进行操作,将会使程序发生不可预知的错误,甚至可能直接引起崩溃.         野指针不是NULL指针,是指向"垃圾"内存的指 ...

  7. MySQL命令无法结束

    输入完sql语句后 输入分号结束,发现无法结束,原因一般是引号不对称导致的.再输入'; 或者对称的分号就可以结束.

  8. 二、nginx搭建图片服务器

    接上篇:Nginx安装手册 cd /usr/local/nginx/conf/ 配置图片服务器 方法一.在配置文件server{}中location /{} 修改配置: #默认请求 location ...

  9. Centos6.6下安装Python3.5

    centos6.6自带的Python2.6,如果想要安装新版本的Python例如Python2.7+或者Python3.5,不能够用yum安装,那么只能从源码编译安装. Step 1: 安装依赖库和编 ...

  10. [C#] 分布式ID自增算法 Snowflake

    最近在尝试EF的多数据库移植,但是原始项目中主键用的Sqlserver的GUID.MySQL没法移植了. 其实发现GUID也没法保证数据的递增性,又不太想使用int递增主键,就开始探索别的ID形式. ...