<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
分享到:
相关推荐
首先,你需要在页面中引入 jQuery 和 jQuery UI 的 CSS 与 JS 文件。jQuery UI 包含了 Dialog 插件的实现: ```html <!-- 引入 jQuery --> <script src="https://code.jquery.com/jquery-3.x.y.min.js"> <!-- 引入 ...
在APICloud中,DialogBox是对原生对话框功能的封装,通过JavaScript API调用,能够实现与原生应用一样的对话框效果。这包括警告对话框、确认对话框、输入对话框等多种类型,满足开发者在不同场景下的需求。 1. **...
`eslint-plugin-class-property`是一个专门为解决这个问题而设计的开源库,它是一个针对ESLint的插件,专注于处理类属性(class properties)的语法。本文将深入探讨这个插件的功能、用途以及如何在项目中集成和配置...
`jquery-ui-dialog-demo` 是一个基于 jQuery UI 库的弹出窗口插件示例,它提供了丰富的交互式对话框功能,包括模拟原生 JavaScript 的 `alert` 和 `confirm` 对话框以及自定义的打开(open)模式。这个插件使得在...
此Dialogflow客户端库和Dialogflow API V1。 请 。 您可以将此库用作常见的预构建.js()。 或者,您可以将其与nodejs一起安装,并作为es6(或.ts)模块导入。 见下文。 npm install api-ai-javascript@2.0.0-...
在artDialog(6.0.0)原始压缩版dialog-plus.js的基础上,增加了对话框的两个选项: 1、【esc】:是否点击键盘[Esc]键退出(默认true); 2、【drag】:是否允许用户拖拽(默认true);
13-dialog组件-涉及到的深度选择器知识大纲style添加属性scoped原理scoped会给当前组件的模板中所有的元素都添加一个随机的属性scoped会
简单来说,vue-class-component是Vue.js的一个官方开发的类装饰器,它利用了TypeScript装饰器的特性,允许我们以类的形式编写Vue组件。它与另一个流行的社区插件vue-property-decorator有着紧密的联系。 在使用vue-...
在本项目中,我们主要探讨的是如何利用Node.js和Bootstrap框架来构建一个编辑修改学生信息的页面。Node.js是一款强大的JavaScript后端开发平台,而Bootstrap则是一个流行的前端UI框架,两者结合可以快速创建响应式、...
JavaScript应用实例-控件点击逻辑类.js
类变压器 它的ES6和Typescript时代。 如今,您比以往更多地使用类和构造函数对象。 类转换器允许您将普通对象转换为类的某些实例,反之亦然。 它还允许根据条件对对象进行序列化/反序列化。 这个工具在前端和后端都...
"js-class-is-master"这个压缩包很可能包含了"class-is"库的源码、示例、文档以及测试用例。源码通常分为几个部分:主文件(可能是`index.js`),可能包含库的核心逻辑;示例文件(如`examples`目录)用来演示如何在...
JavaScript应用实例-0根据图色点击.js
2. **模态与非模态**:ArtDialog支持创建模态对话框(阻止用户与页面其他部分交互)和非模态对话框,适用于不同类型的提示和信息展示。 3. **响应式设计**:随着移动设备的普及,响应式设计变得至关重要。ArtDialog...
JavaScript应用实例-钉钉打卡页面.js
JavaScript应用实例-WebView多页面浏览.js
《使用原生JavaScript实现的对话框:dialog-1.0.1.zip详解》 在Web开发中,对话框是不可或缺的交互元素,如alert、confirm等。这些对话框通常用于向用户显示信息或获取用户的确认操作。然而,浏览器内置的对话框在...
首先,确保你的页面已经引入了jQuery库,因为jQuery是dialogBox.js的基础。然后,通过`<script>`标签引入`jquery.dialogBox.js`和相应的CSS样式文件。例如: ```html <script src="js/jquery.min.js"> ...
如果"cx-dialog-close"是某种库、框架或组件的一部分,它可能涉及到JavaScript、React、Vue.js等前端技术中的一个交互元素。在这些框架中,"dialog"通常指的是模态对话框,而"close"事件则与用户关闭对话框的行为...
Visual Studio Code上搜不到插件Auto.js-Pro-Ext hyb1996