<!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. hdu3713 Double Maze

    Problem Description Unlike single maze, double maze requires a common sequence of commands to solve ...

  2. Ubuntu14.04下搭建VPN服务 -pptp

    在Ubantu下采用PPTP搭建VPN,优点是配置简单快捷.本教程亲自测试,熟练了在新机器上5分钟搞定VPN. - - - - - - - - - - - - - - - - - - - - - - ...

  3. log4j日志框架学习

    初识Log4j:      log4j有三个部分:           1.loggers 负责捕获日志信息.           2.appenders  负责输出信息到不同的目的地         ...

  4. .NET Core多平台开发体验[2]: Mac OS X

    除了微软自家的Windows平台, .NET Core针对Mac OS以及各种Linux(RHEL.Ubuntu.Debian.Fedora.CentOS和SUSE等)都提供了很好的支持,我们先来体验 ...

  5. ctf常见php弱类型分析

    1. 布尔反序列化 $unserialize_str = $_POST['password']; $data_unserialize = unserialize($unserialize_str); ...

  6. Maven maven-compiler-plugin版本

    项目执行Maven clean后出现WARNING提示.报如信息如下,根据报错信息 'build.plugins.plugin.version' for org.apache.maven.plugin ...

  7. Weave 如何与外网通信？- 每天5分钟玩转 Docker 容器技术（66）

    上一节我们学习了 Weave 网络内部如何通信,今天讨论 Weave 如何与外界通信. weave 是一个私有的 VxLAN 网络,默认与外部网络隔离.外部网络如何才能访问到 weave 中的容器呢? ...

  8. IBM与麻省理工学院联合建立AI实验室 承诺投资2.4亿美元

         IBM和麻省理工学院将通过今天宣布的一个新的联合实验室共同努力,对人工智能进行广泛的研究.麻省理工学院IBM沃森AI实验室将重点关注四个研究支柱:开发AI算法,使用物理学来创建AI计算的新硬 ...

  9. C#后台调用浏览器打开下载连接地址的三种方法

    一.从注册表中读取到本地计算机默认浏览器,然后调用下载. private void button1_Click(object sender, EventArgs e)   {       //从注册表 ...

  10. 寻找Harris、Shi-Tomasi和亚像素角点

    Harris.Shi-Tomasi和亚像素角点都是角点,隶属于特征点这个大类(特征点可以分为边缘.角点.斑点). 一.Harris角点检测是一种直接基于灰度图像的角点提取算法,稳定性较高,但是也可能出 ...