javascript Demo模态窗口

根据提供的文件信息，我们可以概括出以下知识点： 标题中提到的“javascript Demo模态窗口”，表明此文档中将展示如何使用纯JavaScript编写模态窗口。模态窗口是一种常用于网站中，用于临时显示重要信息或弹出对话框的用户界面元素。在本例中，将不使用Jquery插件，而是通过纯JavaScript代码实现。 描述部分表明作者认为一些网站使用Jquery插件实现模态窗口不够灵活，并且介绍了下面的Demo支持回调功能，可以直接使用modalDialog.js文件。 标签“javascript 模态窗口”再次确认了文档内容的主题。 在【部分内容】中，我们首先看到了对js对象myJs的定义和扩展，其中包含了一个alert方法和一个获取指定ID的DOM对象的方法。myJs对象被添加到了window对象中，以便在页面中的任何地方使用。 接着，文档详细说明了modalDialog函数，它定义了模态窗口的各种属性，包括内容源URI、标题、宽度、高度、边框颜色和宽度、背景颜色、标题背景颜色以及回调函数。 modalDialog的原型扩展了一系列方法，包括设置和获取属性、触发回调和显示模态窗口的方法。在显示方法中，通过向document.body.innerHTML添加HTML结构来创建模态窗口和背景遮罩层。这个方法中还包含了创建遮罩层和模态窗口层的逻辑，通过获取body的宽度和高度来设置遮罩层的尺寸，确保它能够覆盖整个可视区域。 modalDialog.js文件中的show方法详细地展示了如何构建模态窗口的HTML结构并将其插入到页面中。其中还包含了设置z-index属性来控制层叠顺序，使得模态窗口能够显示在页面的前端。 在整个实现过程中，作者通过直接操作DOM来动态创建模态窗口的HTML结构，展示了JavaScript在操控DOM元素方面的能力。同时，通过定义回调函数，提供了向模态窗口中加入自定义行为的接口，例如，可以在模态窗口显示后执行某些操作。 文档中提到了避免名称冲突的做法，将myJs对象附加到window对象上，并为其赋予了一个独特的名称js，这样做可以确保在全局范围内避免命名空间冲突。 总结来说，此文档向我们展示了如何使用纯JavaScript创建一个可定制、带有回调功能的模态窗口组件。该组件完全不依赖于任何第三方库，展示了JavaScript编程语言在构建交互式网页组件方面的灵活性和能力。通过手动操作DOM和利用JavaScript原型继承的特性，作者成功构建了一个能够在现代浏览器中运行的模态窗口。