弹出最简单的模式化遮罩层的js代码
发布时间:2024-06-18 16:48:53
标签:弹出,模式化,遮罩层
假设我们有一个容器container如下:
<style type=”text/css”>
#container{width:auto;height:auto; overflow:hidden;}
/*这里的overflow:hidden;属性主要是为了设置使超出container的部分自动隐藏,之所以设置这个属性,是为了解决ie8及以下版本浏览器兼容性问题*/
</style>
<div id=”container” >
</div>
现在要在网页中弹出一个div层,使在关闭弹出的div层之前不可操作container。
那么,我们首先需要定义出这个遮罩的div层如下:
<div id=”continer”>
<!—只所以将遮罩层放到container里面
<divid=”shade” style=”width:1600px;height:900px;/*给遮罩层一个初始大小*/”>
<input name=”close” id=”close” value=”关闭”>
</div>
</div>
接下来,就是用js来使遮罩层始终显示在屏幕上并不可操作遮罩层下面的内容,点击关闭按钮关闭遮罩层
<script type=”text/javascript”>
$(function(){
//获取当前浏览器的内部宽和高
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//设置遮罩层的宽和高
$("#shade").width(nWidth);
$("#shade").height(nHeight);
//设置关闭按钮居中显示
$("#close").css("margin-top",nHeight/2-50+"px");
//设置当浏览器大小改变时触发的事件
$(window).resize(function(){
//获取当前浏览器的内部宽和高
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//设置遮罩层的宽和高
$("#shade").width(nWidth);
$("#shade").height(nHeight);
//设置关闭按钮居中显示
$("#putPwd").css("margin-top",nHeight/2-50+"px");
});
//设置关闭按钮消除遮罩层
$("#close").click(function(){
$("#shade").removeAttr("id");
$("#shade").html("");
});
//也可用纯js来写
Document.getElementById(“shade”).style…….;
//后面多说无益,如果有兴趣又实在不会写,可以和本人联系。
})
</script>
0
投稿
猜你喜欢
- 前言一些公司内部的CMS系统存在某些内容让指定的用户有权限访问,这时候可以用django自带的权限管理进行限制,比较方便。缺点:django
- 在函数参数中乱用表达式作为默认值Python允许给一个函数的某个参数设置默认值以使该参数成为一个可选参数。尽管这是这门语言很棒的一个功能,但
- 注意,一般官方接口都带有可导功能,如果你实现的层不具有可导功能,就需要自己实现梯度的反向传递。官方Linear层:class Linear(
- 在NumPy中,所有的标准三角函数如sin、cos、tan等均有对应的通用函数。一、利萨茹曲线(Lissajous curve)利萨茹曲线是
- 一、命令格式:定义变量名称条件函数用“:”作为结尾下一级命令用空格键缩进,默认使用Tab键因为这样比较明显例如:yongHuMing = i
- 本文实例讲述了python实现备份目录的方法。分享给大家供大家参考。具体如下:备份脚本1:#!/usr/bin/python# Filena
- 最近,我加入了Cloudera,在这之前,我在计算生物学/基因组学上已经工作了差不多10年。我的分析工作主要是利用Python语
- Excel是微软办公套装软件的一个重要的组成部分,它可以进行各种数据的处理、统计分析和辅助决策操作,广泛地应用于管理、统计财经、金融等众多领
- 本文实例讲述了Python实现将一个正整数分解质因数的方法。分享给大家供大家参考,具体如下:遇到一个python编程联系题目:将一个正整数分
- CUDACUDA是显卡厂商NVIDIA推出的运算平台。CUDA™是一种由NVIDIA推出的通用并行计算架构,是一种并行计
- 前言适用于python2和python31. loads方法与load方法的异同在Python中json是一个非常常用的模块,这个主要有4个
- 一、行转列— case+group bymysql> CREATE TABLE `TEST_TB_GRADE` (
- 目录1. 警告不是异常2. 警告能捕获吗3. 捕获警告方法一4. 捕获警告方法二5. 捕获警告方法三1. 警告不是异常你是不是经常在使用一些
- 理解SQL Server对于内存的管理是对于SQL Server问题处理和性能调优的基本,本篇文章讲述
- 因为即将开始淘宝的项目,在前端方面必然要深入了解taobao ued规范,规范还是比较全的,只是对taobao.com的编码和字符集的选择有
- 是的,这仅仅是一个PPT文档,由Anna Debenham上传至slideshare。幻灯片的标题叫做《CSS nuggets》,嗯,很好的
- 阅读上一篇:WEB2.0网页制作标准教程(11)不用表格的菜单辛苦了好多天,我们努力学习使用XHTML+CSS来重新设计我们的网站。那么我们
- 无限循环如果条件判断语句永远为 true,循环将会无限的执行下去,如下实例:#!/usr/bin/python# -*- coding: U
- 以下是IE7中新支持的属性:min-height,max-height,min-width,max-width这个hack还可以使最大高度兼
- 本文实例讲述了朴素贝叶斯分类算法原理与Python实现与使用方法。分享给大家供大家参考,具体如下:朴素贝叶斯分类算法1、朴素贝叶斯分类算法原