<!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. Java入门——学会使用API

    API是什么? API(Application Programming Interface)就是别人写的代码使用说明书. 下面是中文版API的使用具体截图. 1.左上角有个显示(图中"隐藏& ...

  2. ASP.NET 给Web中的网页添加Loading进度条形式

    前段时间客户提了一个需求,要求给网站中某些功能添加进度条形式,因为某些功能查询的数据量太大,经常会出现点击Search按钮,但是没有任何反应的情况,会让用户以为网站挂掉了,导致投诉的事情发生,所以客户 ...

  3. 查询session内容

    Enumeration enumsession = request.getSession().getAttributeNames(); while(enumsession.hasMoreElement ...

  4. for循环购物清单

    //实现如图的购物清单 package ch06; import java.util.Scanner; /** * Created by liwenj on 2017/7/18. */ public ...

  5. 为什么a标签中使用img后,高度多了几个像素？

    <li><a href="#"><img src="images/audio.jpg" alt="">& ...

  6. java IO输入输出流实现文本复制

  7. QT creator编程C++第一步，说“Hello world!”

    这个学期选了计算机学院的<数字图像处理>,正好和我的图像识别项目有所关联,老师说不能用MATLAB来做,这让我一个没学过C++的孩纸欲哭无泪. 只好求助计算机学院的大佬,自学C++. 大佬 ...

  8. 把JavaScript代码改成ES6语法不完全指南

    目录 * 核心例子 * 修改成静态变量(const)或块级变量(let) * 开始修改 * 疑问解释(重复定义会发生什么) * 疑问解释(let的块级作用域是怎样的) * 疑问解释(const定义的变 ...

  9. MyEclipse使用（一）

    一.配置 window ----> preferences (1)配置 JDK java--->Installed JREs --> Add ---> JRE name --- ...

  10. JavaScript 中运算优先级问题

    优先级引发的问题 这篇文章对 JavaScript 中的运算符进行小结,很多人对运算符优先级这一知识点都是一带而过.这就导致在写一些比较奇葩的 js 代码,你并不知道它的输出是啥,下面举一个例子,这也 ...