`
wine-god
  • 浏览: 14162 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

[JS]DialogClass--禁止页面点击类(转)

阅读更多

<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>
<TITLE>
</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
/** 
 * 类 名 称: DialogClass 
 * 功能说明: 禁止页面点击类 
 * 版权信息: CopyRight 2005-2006 JoeCom 
 * 创 建 人: JoeCom | MSN:juwuyi@hotmail.com |  blog:http://hi.baidu.com/joecom 
 * 创建日期: 2006-07-21 
 * 修 改 人:  
 * 修改日期:  
 */ 

function DialogClass(){ 
    this.blankImgHandle = null; 
    this.tags = new Array("applet", "iframe", "select","object","embed"); 
    this.body_overflow_y = null; 
    this.body_overflow_x = null; 
    
    this.hideAllSelect = function() 
    { 
        
       for( var k=0;k<this.tags.length;k++) 
       { 
           var selects = document.getElementsByTagName(this.tags[k]);     
           for (var i=0;i<selects.length;i++) 
           { 
               selects[i].setAttribute("oldStyleDisplay",selects[i].style.visibility); 
               selects[i].style.visibility = "hidden"; 
           } 
       }        
    } 
     
    this.resetAllSelect = function() 
    {        
       for( var k=0;k<this.tags.length;k++) 
       { 
           var selects = document.getElementsByTagName(this.tags[k]);     
           for (var i=0;i<selects.length;i++) 
           {            
               if (selects[i].getAttribute("oldStyleDisplay")!=null) 
                  selects[i].style.visibility = selects[i].getAttribute("oldStyleDisplay"); 
           } 
        }     
    }         
         
   this.show = function() 
   {     
      this.body_overflow_y = document.body.style.overflowY; 
       this.body_overflow_x = document.body.style.overflowX; 
       document.body.style.overflowX = "hidden"; 
       document.body.style.overflowY = "hidden"; 
      this.hideAllSelect(); 
             
        var w = "100%" ; 
        var h = "100%" ; 
         
        this.blankImgHandle = document.createElement("DIV"); 
        with (this.blankImgHandle.style){ 
            position = "absolute"; 
            left     = 0; 
            top      = document.body.scrollTop; 
            height   = "100%"; 
            width    = "100%"; 
            zIndex   = "9999"; 
            filter   = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)"; 
            opacity  = "0.6"; 
            backgroundColor = "#ffffff";              
        }          
         
        document.body.appendChild(this.blankImgHandle);         
   }         
         
   this.close = function(){                
         document.body.style.overflowY = this.body_overflow_y;                
      document.body.style.overflowX = this.body_overflow_x; 
      if (this.blankImgHandle) 
      { 
          this.blankImgHandle.parentNode.removeChild(this.blankImgHandle); 
      }       
      this.resetAllSelect();            
  } 
}

// End -->
</SCRIPT>

</HEAD>
<BODY >
<button onclick="demo()">DialogClass</button> 
<script> 
function demo() 
{ 
  var dialog = new DialogClass();   
  dialog.show(); //关闭:dialog.close();  
} 
</script>

</BODY></HTML>

 原理:在整个页面铺一个width=100% ,height=100% 的div,并使z-index为很大的数,从而达到静止页面点击的功能。

 

转至:http://hi.baidu.com/joecom/blog/item/acb8cf1b1ac9f8faae513352.html

分享到:
评论

相关推荐

    javascript经典特效---禁止刷新页面.rar

    这个"javascript经典特效---禁止刷新页面.rar"压缩包文件包含了一个示例,展示了如何使用JavaScript来阻止浏览器的刷新操作。 首先,我们需要理解浏览器的刷新事件。在HTML中,当用户点击浏览器的刷新按钮或者按下...

    前端项目-dialog-polyfill.zip

    为了确保`dialog-polyfill`正常工作,你需要在`&lt;head&gt;`标签内引入`dialog-polyfill.css`,并在`&lt;body&gt;`标签结束前引入`dialog-polyfill.js`,以确保在DOM加载完毕后执行JavaScript代码: ```html &lt;!DOCTYPE html&gt; ...

    前端开源库-eslint-plugin-class-property

    `eslint-plugin-class-property`是一个专门为解决这个问题而设计的开源库,它是一个针对ESLint的插件,专注于处理类属性(class properties)的语法。本文将深入探讨这个插件的功能、用途以及如何在项目中集成和配置...

    前端开源库-class-inspector

    "class-inspector"就是这样一款专为前端开发者设计的开源库,它的主要功能是作为类检查器,帮助我们获取类的静态方法和实例方法,从而更好地理解和操作JavaScript对象。 一、什么是class-inspector "class-...

    Node.js-parse-class解析hyperscript类符号

    `parse-class`库的核心功能是将字符串形式的类列表转换为JavaScript对象,便于进一步操作。例如,给定一个字符串如`'foo bar baz'`,`parse-class`会将其解析为`{foo: true, bar: true, baz: true}`。这样,开发者...

    video.js禁止点击

    在本文中,我们将深入探讨如何在`video.js`中实现“禁止进度条点击”的功能。 首先,我们需要了解`video.js`的基本结构。这个库通过HTML5 `&lt;video&gt;` 元素提供了一个强大的封装层,允许我们通过JavaScript进行高级...

    qianfengg#Vue-Learning#dialog组件-涉及到的深度选择器1

    13-dialog组件-涉及到的深度选择器知识大纲style添加属性scoped原理scoped会给当前组件的模板中所有的元素都添加一个随机的属性scoped会

    node.js项目---编辑修改学生信息页面

    在本项目中,我们主要探讨的是如何利用Node.js和Bootstrap框架来构建一个编辑修改学生信息的页面。Node.js是一款强大的JavaScript后端开发平台,而Bootstrap则是一个流行的前端UI框架,两者结合可以快速创建响应式、...

    前端开源库-class-is

    "js-class-is-master"这个压缩包很可能包含了"class-is"库的源码、示例、文档以及测试用例。源码通常分为几个部分:主文件(可能是`index.js`),可能包含库的核心逻辑;示例文件(如`examples`目录)用来演示如何在...

    JavaScript应用实例-0根据图色点击.js

    JavaScript应用实例-0根据图色点击.js

    class-transformer:对象和类之间基于装饰器的转换,序列化和反序列化

    类变压器 它的ES6和Typescript时代。 如今,您比以往更多地使用类和构造函数对象。 类转换器允许您将普通对象转换为类的某些实例,反之亦然。 它还允许根据条件对对象进行序列化/反序列化。 这个工具在前端和后端都...

    class-validator:类的基于装饰器的属性验证

    类验证器可在浏览器和node.js平台上使用。目录安装npm install class-validator --save注意:使用class-validator时,请至少使用npm @ 6。 从npm @ 6开始,依赖关系树被展平,这是class-validator要求的才能正常...

    JavaScript应用实例-00-简化点击控件.js

    JavaScript应用实例-00-简化点击控件.js

    class-of-builtins.rar_class

    在这个名为"class-of-builtins.rar_class"的压缩包里,包含的两个文件——10.1.5-1.js和class-of-builtins.js,很可能是关于JavaScript中的内置类以及自定义类的示例或教程。 1. **JavaScript 中的类(Class)** ...

    JavaScript应用实例-钉钉打卡页面.js

    JavaScript应用实例-钉钉打卡页面.js

    个人音乐博客 h5和css适用于新手借鉴

    文件夹部分: css---&gt;层叠样式表文件 main.css---&gt;index.html(也就是主页面的样式) reset.css---&gt;覆盖浏览器默认的css样式 ... main.js---&gt; 页面点击 视频显示的实现 media---&gt;存放页面播放的视频

    javascript----一个Tab的JS

    这个实例“javascript----一个Tab的JS”显然是关于如何使用JavaScript实现网页上的选项卡功能,这对于初学者来说是非常实用的实践项目。选项卡是网页设计中常见的组件,它能有效地组织和展示大量信息,提高用户体验...

    jquery.dialogBox.js动画对话框插件

    首先,确保你的页面已经引入了jQuery库,因为jQuery是dialogBox.js的基础。然后,通过`&lt;script&gt;`标签引入`jquery.dialogBox.js`和相应的CSS样式文件。例如: ```html &lt;script src="js/jquery.min.js"&gt; ...

    nuxt-class-component:ES TypeScript装饰器,用于类样式的NuxtVue组件

    Nuxt类组件Nuxt.js的ES和Typescript类组件装饰器,扩展了安装npm install --save nuxt-class-component# oryarn add nuxt-class-component通天塔说明npm install --save-dev babel-plugin-transform-decorators-...

    Visual Studio Code auto.js.pro专用插件 Auto.js-Pro-Ext hyb1996

    Visual Studio Code上搜不到插件Auto.js-Pro-Ext hyb1996

Global site tag (gtag.js) - Google Analytics