js形成页面的一种遮罩效果实例代码

用这锻代码 之前请先下载jquery库


代码如下:

var maskStackCount = 0;

function mask(method){

//这里是你想要进行遮罩的窗口，我这里想要遮罩的是一个iframe窗口，也可以用var winObj=$(window)

var winObj=window.top.$("body").find("iframe[name='dialognormaliframe']");

if(typeof method == "undefined"){
            method="open";
        }
        if (method == "open") {
            if (maskStackCount <= 0) {
                var mask = $("<div id='window-mask' class='window-mask' style='display:none'></div>").appendTo("body");
                mask.css({
                    width:     winObj.width() + "px",
                    height:     winObj.height() + "px",
                    filter: "alpha(opacity=60)"
                }).show();
                    winObj.on("resize.mask", function(){
                    mask.css({
                        width:     winObj.width() + "px",
                        height:     winObj.height() + "px"
                    });
                });
            }
            maskStackCount++;
        }
        else if(method == "close"){
            maskStackCount--;
            $("#window-mask").remove();
                winObj.off("resize.mask");
        }
}

赞 (0)

相关推荐

  • js弹出div并显示遮罩层

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

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

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

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

  • 使用新的消息弹出框blackbirdjs

    使用新的消息弹出框blackbirdjs

    jgyhuzhou 写道 BlackBird, G. Scott Olson开发的javascript日志记录库,相当于java中的log4j, javascript开发者再也不用使用alert来调试啦. 以下是具体的操作说明: Html代码 复制代码 代码如下: <html> <head> <script type="text/javascript" src="/PATH/TO/blackbird.js"></script

  • js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

    js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 复制代码 代码如下: <!doctype html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{}{margin:0;padding:0;} html{}{_background:url(about:blank);} /**//*

  • JS实现遮罩层效果的简单实例

    复制代码 代码如下: function show(){ var cover = document.getElementById("cover"); cover.style.width = document.documentElement.scrollWidth+"px"; cover.style.height = document.documentElement.scrollHeight+"px"; cover.style.display = &

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

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

  • js实现登陆遮罩效果的方法

    本文实例讲述了js实现登陆遮罩效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="tex

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

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

  • 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

  • js形成页面的一种遮罩效果实例代码

    用这锻代码 之前请先下载jquery库 复制代码 代码如下: var maskStackCount = 0; function mask(method){ //这里是你想要进行遮罩的窗口,我这里想要遮罩的是一个iframe窗口,也可以用var winObj=$(window) var winObj=window.top.$("body").find("iframe[name='dialognormaliframe']"); if(typeof method == &

  • js统计页面上每个标签的数量实例代码

    js统计页面上每个标签的数量实例代码

    具体代码如下所示: function fold(node){ var map = new Map(); map.set(node.tagName,1); [].reduce.call(node.children,(acc,child)=>{ deal(acc,fold(child)); return acc },map) return map } function deal(srcMap,tarMap){ tarMap.forEach((value,tagName)=>{ var newV =

  • jQuery实现点击弹出背景变暗遮罩效果实例代码

    jQuery实现点击弹出背景变暗遮罩效果实例代码

    本文是小编实现的一个简单的jquery点击弹出背景变暗遮罩效果,并且点击空白处隐藏弹出层的效果,效果非常棒,小编只给大家贴出了关键代码了,大家可以根据个人需要适当的添加内容. js代码如下: <script type="text/javascript"> $(document).ready(function(){ $(".tkyy").click(function(event){ event.stopPropagation(); //停止事件冒泡 $(&

  • Android xml实现animation的4种动画效果实例代码

    Android xml实现animation的4种动画效果实例代码

    animation有四种动画类型:分别为alpha(透明的渐变).rotate(旋转).scale(尺寸伸缩).translate(移动),二实现的分发有两种,一种是javaCode,另外一种是XML,而我今天要说的是XML实现的方法,个人感觉javaCode的实现方法比xml要简单,所以有需要的可以自己去找找资料看看. 先给大家展示下效果图,如果大家感觉还不错,请继续往下阅读. 下面是我的四个xml文件,分别代表这四种动画类型. alpha.xml COde: <?xml version=&quo

  • JS小功能(offsetLeft实现图片滚动效果)实例代码

    JS小功能(offsetLeft实现图片滚动效果)实例代码

    效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #div1        {            width: 245px;            height: 150px;            background: red;            margin: 250p

  • 用js+iframe形成页面的一种遮罩效果的具体实现

    用这锻代码 之前请先下载jquery库 复制代码 代码如下: var maskStackCount = 0; function mask(method){ //这里是你想要进行遮罩的窗口,我这里想要遮罩的是一个iframe窗口,也可以用var winObj=$(window) var winObj=window.top.$("body").find("iframe[name='dialognormaliframe']"); if(typeof method == &

  • js使用swiper实现层叠轮播效果实例代码

    js使用swiper实现层叠轮播效果实例代码

    前言 swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好. 由于简单这里当然就不会去详细介绍了,下面就来开始本文的正文内容 实现过程: 一.移动端-需求swiper 4.0.3实现层叠轮播 二.实现效果如下 三.方案:查找了下发现使用swiper的切换效果coverflowEffect可以实现 1.coverflow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式 2.coverflow的属性: rotate:slide做3d旋转时Y轴的旋转角

  • vue/js实现页面自动往上滑动效果

    vue/js实现页面自动往上滑动效果

    本文实例为大家分享了vue/js实现页面自动往上滑动的具体代码,供大家参考,具体内容如下 最近做的新项目中要求让看不见的内容自动往上滑动一定的距离,使之可以看到,下面我来分享一下. 效果图: 我主要是使用 scrollTop 来做的往上滑动的功能,使用 animate 函数使之有一定的动画效果.有一个注意点就是要滚动的元素是父级标签,比如我下面列举的代码:id=“scrollbody” 是放在父级标签那里的,它包裹着多项 class=“item” ,如果还是不懂的话,就看使用了v-for在哪个标

  • 微信小程序 利用css实现遮罩效果实例详解

    微信小程序 利用css实现遮罩效果实例详解

    微信小程序 利用css实现遮罩效果实例详解 实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码: .b1{position:fi

  • 通过jquery实现页面的动画效果(实例代码)

    有很多函数可以用来实现动画效果,其中animate函数为最为常见的函数之一.以下为对该函数使用方式的简要介绍. animate函数基本形式 通过animate实现动画效果的基本形式为: $(selector).animate({params},speed,callback); 其中{params}为必须项,它是一个对象,指明了我们希望指定元素通过动画效果运行后,其所具有的的CSS样式,speed和callback则皆为可选项,其中speed指明了动画运行的速度,其值可为数值类型(如1000表示动

随机推荐