点击后弹出界面，通过判断浏览器长宽自动设定页面宽度和登陆页面位置。

<style>

/*遮罩层 弹出层*/

.mask {
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0px;
left: 0px;
z-index: 200;
}

.show_d {
width: 300px;
height: 300px;
background-color: gainsboro;
position: fixed;
z-index: 300;
}

</style>

<body>

<!--遮罩层-->
<div class="mask" hidden="hidden"></div>

<!--登陆弹出层-->
<div class="show_d" hidden="hidden">

</div>

</body>

</html>
<script>
//弹出层大小设定
var mask = document.getElementsByClassName("mask")[0];
var show_d = document.getElementsByClassName("show_d")[0];
var top_d = document.getElementsByClassName("top_d")[0];
var show_d_r = document.getElementsByClassName("show_d_r")[0];

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

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

//登陆弹出设定
top_d.onclick = function() {
mask.removeAttribute("hidden");
show_d.removeAttribute("hidden");
}
mask.onclick = function() {
mask.setAttribute("hidden", "hidden");
show_d.setAttribute("hidden", "hidden");
}
show_d_r.onclick = function() {
mask.setAttribute("hidden", "hidden");
show_d.setAttribute("hidden", "hidden");
}

</script>

js弹出层的写法实例的更多相关文章

  1. js弹出层

    js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层 表单提交后遮住页面,等 ...

  2. jquery.blockUI.2.31.js 弹出层项目介绍

    {insert_scripts files='user.js'} <style type="text/css"> #float_login{border:1px sol ...

  3. layui弹出层之应用实例讲解

    从酒店管理系统到智能门锁及其现在的资源共享平台,layui框架,我们团队用的比较多的就是这个layui弹出层. layui弹出层,除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示 ...

  4. js 弹出层，以及在javascript里定义层样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 简单 JS 弹出层 背景变暗

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

  6. 在Vue中使用layer.js弹出层插件

    layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...

  7. JS弹出层制作，以及移动端禁止弹出层下内容滚动，overflow:hidden移动端失效问题

    HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...

  8. Js弹出层，弹出框代码

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

  9. div+js 弹出层

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

随机推荐

  1. BZOJ 1602 USACO 2008 Oct. 牧场行走

    [题解] 要求出树上两点间的距离,树上的边有边权,本来应该是个LCA. 看他数据小,Xjb水过去了...其实也算是LCA吧,一个O(n)的LCA... #include<cstdio> # ...

  2. 【模板】dijkstra

    洛谷 4779 #include<cstdio> #include<cstring> #include<algorithm> #include<queue&g ...

  3. SGC强制最低128位加密，公钥支持ECC加密算法的SSL证书

      Pro SSL证书,验证企业域名所有权和企业身份信息,采用SGC(服务器门控)技术强制128位以上至256位加密,属于企业OV验证级专业版(Pro) SSL证书:即使用户使用低版本浏览器(比如浏览 ...

  4. java 多线程面试题

    1.什么是线程? 线程是操作系统能够运行的最小调度单位,他被包含在进程中,是进程中实际运作的单位. 2.线程和进程的区别 线程是进程的子集,一个进程有很多线程,每个线程执行不同的任务,不同的进程使用不 ...

  5. BZOJ——T 1801: [Ahoi2009]chess 中国象棋

    http://www.lydsy.com/JudgeOnline/problem.php?id=1801 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit:  ...

  6. N天学习一个linux命令之ssh

    用途 通过加密连接,远程登录主机和在远程主机执行命令,也可以用于转发x11和tcp,也可用于搭建VPN.第一次连接时,会弹出远程主机公钥指纹确认信息,通过这个方式防止中间人攻击. 用法 ssh [op ...

  7. mongodb之用户/认证/角色/权限管理

    前言 用户权限管理很重要,只给需要的权限,防止应用系统漏洞导致脱库 认证和授权 Authentication 认证识别,解决我是谁 Authorization 操作授权,我能做什么 认证机制 MONG ...

  8. 查看OS 各项参数

    查看CPU 在linux下 cat /proc/cpuinfo 可以得到CPU信息. 要注意的是CPU型号有不同的种类比如AMD Intel.可能在这个文件中显示的信息也不同.但终归是存在这个文件中的 ...

  9. 配置Chrome的代理服务器

    用命令行启动Chrome,带以下参数: --proxy-server="socks5://myproxy:8080"   下列参数可选 --host-resolver-rules= ...

  10. MySQL：解决MySQL无法启动的问题

    MySQL无法启动的原因有多种,这里是我遇到的一种情况和解决方法. 起因: 最近项目需要使用MySQL,于是想在MAC上安装一个本地的数据库,但是其实忘了已经安装过一个版本了,结果发现新的服务器怎么也 ...