<!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. MVC导入命名空间

    为什么要导入 一次性导入,避免每个页面都要导入,代码看起来更为清晰,不再带一个长长的命名空间,视图里面可以直接写类名了. 导入方法 在Views文件夹的web.config的namespaces里面配 ...

  2. C++中4个类型转换相关的关键字/特点／应用场合

    reinterpret_cast是C++里面的一个强制类型转换符,能够将任何的指针类型转换成其他的任何指针类型:能够将任何的整数类型转换成指针类型,反之亦然:滥用reinterpret_cast强制类 ...

  3. LAMP一键安装

    author:JevonWei 版权声明:原创作品 #!/bin/bash 定义变量 export MDB=$(rpm -qa *mariadb*) export HTT=$(rpm -qa *htt ...

  4. h5新增html标签语义

    H5新增常用标签<body> <header>...</header> <nav>...</nav> <article> < ...

  5. ios 初体验<窗口的创建>

    1. 创建工程,这步很简单,百度下即可,在info.plist 里面 去掉 Main 的 ,便于新手练习ios,创建ios工程后,在AppDelegate.m,里面的方法application 加上几 ...

  6. javascript 代码放在head和body的区别

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt239 1,在head中时,所代表的functions只加载而不执行,执行是在 ...

  7. 大型网站的 HTTPS 实践（四）——协议层以外的实践

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt390 1 前言 网上介绍 https 的文章并不多,更鲜有分享在大型互联网站 ...

  8. 01-TypeScript概述

    本篇文章向大家介绍新的TypeScript客户端脚本语言,主要涉及两个方面,一是传统JavaScript语言的弱点,二是TypeScript语言的优势. 一.JavaScript的弱点 1.弱类型,缺 ...

  9. 整个IT界可分为13块大领域

    IT界可以划分为13个领域 Location: NanJing

  10. [转载]Word直接发布新浪博客（以Word 2013为例）

    原文地址:Word直接发布新浪博客(以Word 2013为例)作者:paulke2011 注意:这篇博客直接由Word 2013发出!这虽然也算是一个教程,但更多的是一个试验品. 老早就知道Word有 ...