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

<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. TypeError与ValueError的区别

    typeerror:函数或方法接受了不适当的[类型]的参数,比如sum('nick'),sum函数不接受字符串类型:valueerror:函数或方法虽然接受了正确的[类型]的参数,但是该参数的[值]不 ...

  2. 简单的SpringBoot环境搭建

    开始搭建前请确认您的计算机中的Maven已正确配置 一:使用IDEA创建一个Maven项目,图中第一个指针请选择自己正在使用的JDK版本,指针二请打勾,选中指针三所指向的类型并点击Next 二:填写G ...

  3. 【Codeforces 158B】Taxi

    [链接] 我是链接,点我呀:) [题意] 每辆车可以载重4个人. 一共有n个组,每个组分别有s[i]个人. 要求每个组的人都在同一辆车里面. 问最少需要多少辆车 [题解] 将每个组的人数从小到大排序. ...

  4. AndroidTreeView：Android树形节点View

     AndroidTreeView:Android树形节点View AndroidTreeView是github上的一个第三方开源项目,其在github上的项目主页是:https://github. ...

  5. ssh_整合总结

    开场白:首先,我先帮大家整理一下思路 准备: 数据库,表,数据 jar 包准备 Hibernate 基本jar 包 C3p0 数据库连接池 Spring AOP 基本包 Spring Ioc 基本包 ...

  6. [Usaco2010 Mar]gather 奶牛大集会

    [Usaco2010 Mar]gather 奶牛大集会 题目 Bessie正在计划一年一度的奶牛大集会,来自全国各地的奶牛将来参加这一次集会.当然,她会选择最方便的地点来举办这次集会.每个奶牛居住在 ...

  7. [bzoj1855][Scoi2010]股票交易_动态规划_单调队列

    股票交易 bzoj-1855 Scoi-2010 题目大意:说不明白题意系列++...题目链接 注释:略. 想法:这个题还是挺难的. 动态规划没跑了 状态:dp[i][j]表示第i天手里有j个股票的最 ...

  8. jvm的运行模式 client和 server两种

    jvm的运行模式 client和 server两种 学习了:https://www.cnblogs.com/fsjohnhuang/p/4270505.html 在jdk 9的情况下,好像没有clie ...

  9. javascript 获取当前对象

    <a href="dsfjlsdjf" onclick="testGet()"> 请教编写testGet()函数获取这个超链接href属性,限制例如 ...

  10. 最新版本号cocos2d&#173;2.0&#173;x&#173;2.0.2使用新资源载入策略！不再沿用-hd、-

     前段时间cocos2dx更新了最新版本号cocos2d­2.0­x­2.0.2.也从这个版本号開始对于资源载入与管理都改变了策略. 在之前的载入方式都是通过沿用与cocos2d-iphone一样 ...