<!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. 转每天一个linux命令（4）：mkdir命令

    linux mkdir 命令用来创建指定的名称的目录,要求创建目录的用户在当前目录中具有写权限,并且指定的目录名不能是当前目录中已有的目录. 1．命令格式: mkdir [选项] 目录... 2．命令 ...

  2. 挖个坑，写一个Spring+SpringMVC+Mybatis的项目

    想挖个坑督促自己练技术,有时候想到一个项目,大概想了一些要实现的功能,怎么实现.现在觉得自己差不多能完成QQ空间的主要功能了.准备立个牌坊,写一个类似功能的网站.并且把进度放到这里来. 初步计划实现以 ...

  3. C++语法细节笔记

    1.数据类型转换 当赋给无符号类型一个超出它表示范围的值时,结果是初始值对无符号类型表示数值总数取模后的余数. 把负数转换成无符号数类似于直接给无符号数赋一个负值,结果等于这个负数加上无符号数后的模. ...

  4. [WPF] UserControl vs CustomControl

    介绍 WPF中有两种控件:UserControl和CustomControl,但是这两者有什么区别呢?这篇博客中将介绍两者之间的区别,这样可以在项目中合理的使用它们. UserControl 将多个W ...

  5. bat调用带参数存储过程

    @bat调用sql文件 sqlplus user/pass@orcl @F:\factory.sql @将所有的存储过程封装在sql中 factory.sql:exec pro_factory(&am ...

  6. window的设置属性

    1.windowAnimationStyle 用于设置一组window动画的引用style资源,window的动画属性由R.styleable.WindowAnimation定义. Winow动画类属 ...

  7. [PSIDE]PeopleSoft PSIDE无法启动因为缺失MSVCR100.dll解决办法

    “The program can’t start because MSVCR100.dll is missing from your computer” 当开发工具是绿色版的时候,在打开PSIDE时很 ...

  8. 通过业务系统的重构实践DDD

    最近新接了一个业务系统——社区服务系统,为了快速熟悉和梳理老系统的业务逻辑和代码,同时对老系统代码做一些优化,于是打算花上一个月时间不间断地对老系统服务进行重构.同时,考虑到社区业务的复杂性,想起了之 ...

  9. Promise的用法

    promise.then().promise.catch().Promise.all()... Promise 构造函数接受一个函数作为参数,该函数的2个参数分别是 resolve 和 reject. ...

  10. MySQL（十）之视图

    前言 前面给大家介绍了查询语句,感觉写的还不错的,喜欢的可以去查看.今天给大家分享的是MySQL中的视图. 视图(View):视图是由查询结果形成一张虚拟的表.非临时表,只要不删除的话就会一直存放在磁 ...