弹出最简单的模式化遮罩层的js代码

假设我们有一个容器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)

相关推荐

  • js+html5实现半透明遮罩层弹框效果

    js+html5实现半透明遮罩层弹框效果

    点击按钮,出现半透明遮罩层弹框,说说自己之前发过的愁吧 1.遮罩层半透明了 弹框也跟着半透明了 就像这样 绝望吧 是哪里错了呢?你的css是这样写的吧: 应该这样: 需要注意的是这几个参数的意思:RGB Red Green Bule 3色!及212, 0, 0 三色的值混合 .最后一个参数 0.5 是指的透明度 1表示不透明 2.半遮罩层里面的内容可以上下滑动 感觉挺好玩的 /笑哭 修改就是把半遮罩层的position设置为fixed 里面的内容就不会变啦 接下来就是代码show <!docty

  • JS实现常见的TAB、弹出层效果(TAB标签，斑马线，遮罩层等)

    JS实现常见的TAB、弹出层效果(TAB标签，斑马线，遮罩层等)

    本文实例讲述了JS实现常见的TAB.弹出层效果.分享给大家供大家参考.具体如下: 这里演示tab活页夹(网页标签),斑马线,遮罩层.弹出层的简单实现,里面的JS文件,可下拉保存为JS代码调用即可,也可以拷贝在本网页中使用.这个小网页囊括了目前网上流行的风页标签.弹出层以及斑马线效果,很实用啦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tab-alert-bq-style-demo/ 具体代码如下: <!DOCTYPE html PU

  • JS实现新浪微博效果带遮罩层的弹出框代码

    JS实现新浪微博效果带遮罩层的弹出框代码

    本文实例讲述了JS实现新浪微博效果带遮罩层的弹出框代码.分享给大家供大家参考.具体如下: 这是一款新浪微博效果的弹出框,现成的JS代码,兼容IE6+,以及各主流浏览器.新浪微博弹出层并可拖拽,操作轻松舒适,符合用户的浏览习惯,将代码推荐给各位网友. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sina-zzxg-dlg-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

  • js弹出div并显示遮罩层

    复制代码 代码如下: //--------------------弹出层------------------- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { creatMask(popDivId); } var oWins = document.getElementBy

  • html 锁定页面(js遮罩层弹出div效果)

    复制代码 代码如下: <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>UntitledDocument</title> <script> function createIf

  • js点击按钮实现带遮罩层的弹出视频效果

    js点击按钮实现带遮罩层的弹出视频效果

    本文实例讲解了js点击按钮实现带遮罩层的弹出视频效果,涉及到css以及JavaScript,分享给大家供大家参考,具体内容如下 最终显示效果:点击红色按钮,会有视屏弹出 并带有遮罩层 点击黄色区域可以关闭视频 并回到最初的状态. 页面主要代码:main中主要包含一个a,控制显示的按钮.设置有id值. <div class="main"> <a href="javascript:;" class="video" id="

  • js实现遮罩层弹出框的方法

    本文实例讲述了js实现遮罩层弹出框的方法.分享给大家供大家参考.具体分析如下: 昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用 不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊: 复制代码 代码如下: <style>     #H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #f

  • 弹出最简单的模式化遮罩层的js代码

    假设我们有一个容器container如下: 复制代码 代码如下: <style type="text/css"> #container{width:auto;height:auto; overflow:hidden;} /*这里的overflow:hidden;属性主要是为了设置使超出container的部分自动隐藏,之所以设置这个属性,是为了解决ie8及以下版本浏览器兼容性问题*/ </style> <div id="container&quo

  • 微信浏览器弹出框滑动时页面跟着滑动的实现代码（兼容Android和IOS端）

    在做微信开发的时候遇到这个问题:微信浏览器弹出框滑动时页面跟着滑动. 我觉得这个问题用的是下面这几行代码: var $body = $('body'), dialogIsInView = !1,//当前是不是对话框 lastContentContainerScrollTop = -1,//用于弹出框禁止内容滚动 $contentContainer = $('#content-container');//内容容器 //阻止Window滚动 function stopWindowScroll() {

  • jQuery弹出窗口简单实现代码

    jQuery弹出窗口简单实现代码

    今天讲了Jquery的弹出窗口的组成和用法: 先把引用文件的代码写好: // 每个弹窗的标识 var x =0; var idzt = new Array(); var Window = function(config){ //ID不重复 idzt[x] = "zhuti"+x; //弹窗ID //初始化,接收参数 this.config = { width : config.width || 300, //宽度 height : config.height || 200, //高度

  • 点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码

    复制代码 代码如下: <html><head><title>网页特效-窗口特效-弹出窗口后网页背景变暗的效果</title><meta http-equiv="content-Type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/cs

  • JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

    本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操作指定的内容,例如可以弹出一个登陆框之类的内容,下面就介绍一下如何实现此种效果,代码实例如下: 复制代码 代码如下: <!DOCTYPE html>    <html>    <head>    <meta charset=" utf-8">

  • js弹出窗口简单实现代码

    本文实例为大家分享了js弹出窗口展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ /*margin: 0;*/ } #div1{ width: 100px; height: 100px; border: 1p

  • 原生js实现半透明遮罩层效果具体代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 一些常用弹出窗口/拖放/异步文件上传等实用代码

    一些常用弹出窗口/拖放/异步文件上传等实用代码

    久不出技术类文章,我都忘了自己是一程序员啦......今天写一点工作中遇到的东西,大家共同学习,反正也比较浅显了. 弹出窗口 我们在工作中,经常会碰到弹出窗口类应用,有时候还需要一点遮盖层: 这类圆角弹出框其实用得还是很广泛的,用CSS3可以很容易的出现,但是考虑到浏览器兼容问题,这类还是需要用图片实现了 主要代码如下: 复制代码 代码如下: //弹出层剧中 function popup(popupName) { var _scrollHeight = $(document).scrollTop

  • 为指定的元素添加遮罩层的示例代码

    复制代码 代码如下: //遮罩层 $j("<div id='shade'></div>").css({ position:'absolute', top:0, left:0, backgroundColor:"#808080", opacity:0.1, zIndex:300 }).height($j(document).height()).width($j(document).width()).hide().appendTo("#

  • 简单的Jquery遮罩层代码实例

    Css代码 复制代码 代码如下: #brg{ width: 100%; height: 100%; background: #333; position: absolute; top: 0; left: 0; filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; position: absolute; top: 0; left: 0; display: none;}#showdiv{ width: 100%; height: au

随机推荐