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

<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. hdu 1273最大流

    #include<stdio.h> #include<string.h> #define inf 1000000000 #include<queue> #defin ...

  2. Tornado初学

    http://datacademy.io/course 1.资源链接:http://demo.pythoner.com/itt2zh/index.html 2.windows中调用curl 方法:安装 ...

  3. in与exists的区别

    转载自:http://blog.csdn.net/lick4050312/article/details/4476333 select * from Awhere id in(select id fr ...

  4. 虚拟机+centOS挂载ISO步骤

    https://blog.csdn.net/u010612373/article/details/52240447

  5. 洛谷 P3078 [USACO13MAR]扑克牌型Poker Hands

    P3078 [USACO13MAR]扑克牌型Poker Hands 题目描述 Bessie and her friends are playing a unique version of poker ...

  6. LDAP目录服务折腾之后的总结

    前言 公司管理员工信息以及组织架构的后台系统要和Active Directory目录服务系统打通,后台系统使用PHP开发, 折腾了二十多天,终于上线了,期间碰到过各种疑难问题,不过总算在GOOGLE大 ...

  7. 3.2 Piecewise Linear Interpolation（站点）

    Newton Interpolation: https://www.youtube.com/watch? v=EyRQXA56asI Piecewise Linear Interpolation: h ...

  8. LeetCode 122 Best Time to Buy and Sell Stock II（股票买入卖出的最佳时间 II）

    翻译 话说你有一个数组,当中第i个元素表示第i天的股票价格. 设计一个算法以找到最大利润. 你能够尽可能多的进行交易(比如.多次买入卖出股票). 然而,你不能在同一时间来多次交易. (比如.你必须在下 ...

  9. hdu 1050 Moving Tables(迷之贪心...)

    题意:有400间房间按题目中图片所给的方式排列,然后给出要移动的n张桌子所要移动的范围,每张桌子要移动的范围不能出现重叠的区域:问最少要多少次才能移动完所有的桌子. 题解思路:把题目转换下,就是有n个 ...

  10. 十分钟学会canvas

    一句话描述:canvas是HTML5加入的用来绘制2D图像与文字的元素. 基础 简单步骤: var c = document.getElementById("mycanvas"); ...