js弹出层的写法实例
点击后弹出界面，通过判断浏览器长宽自动设定页面宽度和登陆页面位置。
<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弹出层的写法实例的更多相关文章
- js弹出层
js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层 表单提交后遮住页面,等 ...
- jquery.blockUI.2.31.js 弹出层项目介绍
{insert_scripts files='user.js'} <style type="text/css"> #float_login{border:1px sol ...
- layui弹出层之应用实例讲解
从酒店管理系统到智能门锁及其现在的资源共享平台,layui框架,我们团队用的比较多的就是这个layui弹出层. layui弹出层,除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示 ...
- js 弹出层，以及在javascript里定义层样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 简单 JS 弹出层 背景变暗
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 在Vue中使用layer.js弹出层插件
layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...
- JS弹出层制作，以及移动端禁止弹出层下内容滚动，overflow:hidden移动端失效问题
HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...
- Js弹出层，弹出框代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- div+js 弹出层
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
随机推荐
- 8.mysql执行语句的顺序
mysql执行语句的顺序 一.group by + where group by 字句和where条件语句结合在一起使用,where在前,group by 在后.即先对select xx fr ...
- python爬虫17 | 听说你又被封 ip 了，你要学会伪装好自己，这次说说伪装你的头部
这两天 有小伙伴问小帅b 为什么我爬取 xx 网站的时候 不返回给我数据 而且还甩一句话给我 “系统检测到您频繁访问,请稍后再来” 小帅b看了一下他的代码 ): requests.get(url) 瞬 ...
- python爬虫14 | 就这么说吧，如果你不懂python多线程和线程池，那就去河边摸鱼！
你知道吗? 在我的心里 你是多么的重要 就像 恩 请允许我来一段 freestyle 你们准备好了妹油 你看 这个碗 它又大又圆 就像 这条面 它又长又宽 你们 在这里 看文章 觉得 很开心 就像 我 ...
- 【Codeforces 158C】Cd and pwd commands
[链接] 我是链接,点我呀:) [题意] 让你实现Shell的cd和pwd操作 [题解] 用一个list表示当前的路径 如果路径以/开头则表示需要清空当前路径重新走路 否则在原来路径的基础上继续加就可 ...
- assertion: 18 { code: 18, ok: 0.0, errmsg: "auth fails" }
MongoDB Version: 2.4.7 Mongodump: $ bin/mongodump -u admin -p admin -d test -o ./tmp/ connected to: ...
- hdu_2054_A == B_201311301601
A == B ? Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...
- ZooKeeper常用命令行工具及使用（转）
一.服务端 bin目录下常用的脚本解释 zkCleanup:清理Zookeeper历史数据,包括食物日志文件和快照数据文件 zkCli:Zookeeper的一个简易客户端 zkEnv:设置Zookee ...
- LA 3695 部分枚举
运用部分枚举的思想,很明显完全枚举点的思想是不可能的.改为枚举上下边界,当确定右边界j后,对左边界i,可以有点数为on[j]+on[i]+(leftu[j]-leftu[i])+leftd[j]-le ...
- POJ 2411 插头DP
//插头DP,算是广义路径的吧. /* 我是这样想的,定义填数的为0,未填的为1.然后,初始自然是(0,0).我还定义了整个棋盘的状态,不知是否多此一举. 这样,把轮廓线上的格子状态记录.当(I,J) ...
- maven出现不再支持源选项 1.5。请使用 1.6 或更高版本
maven出现不再支持源选项 1.5.请使用 1.6 或更高版本 学习了:http://blog.csdn.net/sosous/article/details/78312867 错误: [ERROR ...