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 ...
随机推荐
- STM32串口IAP实验笔记
STM32的IAP功能确实方便,以前对此如何实现有所了解,但是一直没去测试,这两天来练了下,可谓困难重重,搞了两天问题也一一解决,下面做些简要的笔记 IAP就是在线应用编程,方便程序升级,可以不用打开 ...
- BZOJ 1617 Usaco 2008 Mar. River Crossing渡河问题
[题解] 显然是个DP题. 设$f[i]$表示送$i$头牛过河所需的最短时间,预处理出$t[i]$表示一次性送i头牛过河所需时间,那么我们可以得到转移方程:$f[i]=min(f[i],f[i-j]+ ...
- Spring Boot-Starter(九)
说明 在使用非spring boot项目我们集成spring mvc mybatis等框架往往需要大量xml配置, spring 的推出是为了解决项目的复杂度,随着项目的增长,xml配置会越来越臃肿, ...
- Aggressive Cows 二分
Farmer John has built a new long barn, with N (2 <= N <= 100,000) stalls. The stalls are locat ...
- CF #321 (Div. 2) E
用线段树维护哈希,类似于进位制的一个哈希 a[i]*p^i+a[i-1]*p^i-1... 然后,线段树存在某区间的哈希的值,对于更新,则只需提前计算出整段的哈希值即可. 判断是否相等,由于相隔为d, ...
- 迭代器和iter()函数
1.先来个样例,有个初步的印象: myTuple=(123,'xyz',45.67) i=iter(myTuple) i.next() 123 i.next() 'xyz' i.next() 45.6 ...
- linux 启动两个tomcat
按照下面的步骤操作即可部署成功:一些具体操作命令就不详细说了,直接说有用的:1.在 /usr/local 下部署两个Tomcat,tomcat的文件夹重命名为:tomcat6-1 . tomcat ...
- ibatis 一对多查询
<typeAlias alias="businessScopeItem" type="com.sdfrdj.vo.BusinessScopeItem"/& ...
- spring与springboot中，如何在static方法里使用自动注入的属性
第一步:写注解@Component 使当前类成为一个bean对象.(@Controller,@service都行) 第二步:写个static的变量 第三步:写个@PostConstruct注解注解注释 ...
- WPF学习笔记——在“System.Windows.StaticResourceExtension”上提供值时引发了异常
在"System.Windows.StaticResourceExtension"上提供值时引发了异常 因应需要,写了一个转换器,然后窗体上引用,结果就出来这个错.编译的时候没事, ...