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

 更新时间:2014年01月04日 16:26:22   作者:  
这篇文章主要介绍了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");
        }
}

相关文章

  • 简单谈谈Javascript中类型的判断

    简单谈谈Javascript中类型的判断

    这篇文章主要是对判断javascript的数据类型的判断方式进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2015-10-10
  • 浅析ES6与CommonJS中模块的用法对比

    浅析ES6与CommonJS中模块的用法对比

    ES6 的模块化汲取了 CommonJS 和AMD 的优点,拥有简洁的语法和异步的支持,并且写法也和 CommonJS 非常的相似,下面我们就来看看二者用法的差异吧
    2023-09-09
  • Firefox+FireBug使JQuery的学习更加轻松愉快

    Firefox+FireBug使JQuery的学习更加轻松愉快

    FireBug是FireFox下最强大的调试插件.利用它,可以让JQuery的学习过程更加轻松愉快.
    2010-01-01
  • JS出现404错误原理及解决方案

    JS出现404错误原理及解决方案

    这篇文章主要介绍了JS出现404错误原理及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • JavaScript 垃圾回收机制分析

    JavaScript 垃圾回收机制分析

    同C# 、Java一样我们可以手工调用垃圾回收程序,但是由于其消耗大量资源,而且我们手工调用的不会比浏览器判断的准确,所以不推荐手工调用垃圾回收
    2013-10-10
  • 4 种滚动吸顶实现方式的比较

    4 种滚动吸顶实现方式的比较

    这篇文章主要介绍了4种滚动吸顶实现方式的比较,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍

    JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍

    cookie是网站设计者放置在客户端(浏览器)的小文本文件,cookie不仅能够实现保存密码功能,还可以通过cookie保存最近浏览记录增加用户体验。本文给大家介绍js使用cookie实现记住密码功能及cookie相关函数讲解,感兴趣的朋友一起看看吧
    2016-11-11
  • 微信小程序实现短信验证码倒计时

    微信小程序实现短信验证码倒计时

    这篇文章主要为大家详细介绍了微信小程序实现短信验证码倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • JS模拟实现ECMAScript5新增的数组方法

    JS模拟实现ECMAScript5新增的数组方法

    ECMAScript5 新增了十个数组方法,这些方法只有在ie9及以上浏览器中可以被使用,下面是对于这些方法的模拟实现简单介绍下,需要的朋友参考下
    2017-03-03
  • 使用cypress编写第一个测试用例

    使用cypress编写第一个测试用例

    这篇文章主要为大家介绍了使用cypress编写第一个测试用例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06

最新评论