<script language="javascript">
function docEle(str){
return document.getElementById(str);
}
function openNewDiv(_id) {
var m = "mask";
if (docEle(_id)) document.body.removeChild(docEle(_id));
if (docEle(m)) document.body.removeChild(docEle(m));
// 新激活图层
var newDiv = document.createElement("div");
newDiv.id = _id;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999";//设置层叠次序，大于1即为离用户最近的
newDiv.style.width = "500px";
newDiv.style.height = "300px";
newDiv.style.top = "50px";
newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px";
// 屏幕居中
newDiv.style.background = "#A3F5F1";
newDiv.style.border = "1px solid #860001";
newDiv.style.padding = "5px";//属性设置元素的内边距，定义元素边框与元素内容之间的空间
newDiv.innerHTML = "新激活图层";
document.body.appendChild(newDiv);
// mask图层，为了好看，可以不要中间层
var newMask = document.createElement("div2");
newMask.id = m;
newMask.style.position = "absolute";
newMask.style.zIndex = "1";
newMask.style.width = document.body.scrollWidth + "px";
newMask.style.height = document.body.scrollHeight + "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
newMask.style.background = "#000";
//透明度
newMask.style.filter = "alpha(opacity=40)";
document.body.appendChild(newMask);
// 关闭mask和新图层
var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "关闭";
//newA.style.background = "#811C18";
newA.onclick = function() {
document.body.removeChild(docEle(_id));
document.body.removeChild(docEle(m));
return false;
}
newDiv.appendChild(newA);
}
</script>
<body>
<a href="#" onclick="openNewDiv('newDiv');return false;">激活新层</a>
</body>
分享到：
相关推荐
JavaScript 创建节点详解 在 JavaScript 中，创建节点是指在文档中添加新元素或文本的过程。创建节点可以使用 createElement()、createTextNode() 和 cloneNode() 等方法。 createElement() 方法 createElement()...
jstree 创建无限分级树的方法基于ajax动态创建子节点 jstree 是一个基于 JavaScript 的树形控件，可以用来创建复杂的树形结构。今天，我们将讨论如何使用 jstree 创建无限分级树，并基于 AJAX 动态创建子节点。 ...
本篇文章将深入探讨“JQ创建节点”的知识点，这在构建动态网页时非常关键。 首先，理解DOM（Document Object Model）是至关重要的。DOM是HTML或XML文档的结构化表示，允许程序和脚本动态更新、添加或删除页面元素。...
### JS动态创建HTML节点 #### 知识点一：JavaScript操作DOM 在Web开发中，JavaScript经常被用来操作文档对象模型（Document Object Model，简称DOM）。DOM是一种将文档（如HTML文档）转换为树状结构的标准，使得...
- **createNode**：根据指定类型、名称和命名空间创建节点。 - **createProcessingInstruction**：创建处理指令节点。 - **createTextNode**：创建包含给定文本的文本节点。 - **getElementsByTagName**：返回具有...
- **创建节点**：可以使用`document.createElement()`创建元素节点，使用`document.createTextNode()`创建文本节点。 - **选择节点**：可以通过`getElementById()`、`getElementsByClassName()`、`...
### JavaScript创建节点的相关知识点 - **`document.createElement()`方法：** 此方法用于创建一个新的元素节点。例如，`document.createElement("input")`会创建一个`<input>`元素。 - **设置元素属性：** 使用`...
var $h1 = $("创建节点' class='head'>jQuery与 JavaScript 创建节点比较</h1>"); $("div").append($h1); ``` 这里，`$("<h1>")` 用于创建 h1 元素，`attr()` 方法用于设置属性，最后通过 `append()` 将新创建的...
DOM 访问、创建、删除、修改文档节点及属性方法 DOM（Document Object Model）是 HTML 和 XML 文档的编程接口，允许开发者使用脚本语言（如 JavaScript）来访问和操作文档的结构和内容。在这里，我们将详细介绍 DOM...
JavaScript 动态创建 Table 表格和节点操作 根据提供的文件信息，我们可以总结出以下知识点： 1. 节点操作 在 HTML 文档中，所有内容都是节点，包括文档节点、元素节点、文本节点、属性节点和注释节点。节点操作...
这个方法通常用于更复杂的节点创建场景。 ##### 10. createPorcessingInstruction 创建操作指令节点 `createPorcessingInstruction` 方法创建一个处理指令节点。处理指令用于向应用程序传递非 XML 数据。 ##### ...
JavaScript 实现在树形菜单中添加、删除节点实例 js note ...JavaScript实现在树形菜单中添加、删除节点实例，本程序侧重于学习，主要介绍一种在多级树节点中创建节点、删除节点，帮助了解树形菜单创作原理。
d3.js是一个强大的JavaScript库，专为创建数据驱动的文档而设计，尤其擅长制作交互式和复杂的可视化图表。本篇文章将深入探讨如何利用d3.js插件构建动态拓扑图，并实现节点的动态增加与删除功能。 拓扑图是一种图形...
GoJs是一个强大的JavaScript库，专为创建交互式和可视化图表设计，如流程图、树图、关系图和力导向图。这个库提供了丰富的功能和灵活性，使得开发者能够轻松构建复杂的数据展示应用。在"GoJs关系图谱动态添加节点...
JavaScript 节点属性和方法 JavaScript 节点的属性和方法是 DOM（文档对象模型）中最基础也是最重要的一部分。只有掌握了节点的属性和方法，才能更好地控制和操作 HTML 文档的结构和内容。 节点属性 1. ...
1. 创建节点 使用 `createElement()` 方法可以创建一个新的元素节点。例如，`var node = document.createElement("div");` 创建了一个 `<div>` 元素节点。但是，需要注意的是，这个节点不会被自动添加到文档中。 2...
本文将详细讲解如何删除由JavaScript创建的子节点，以及介绍几种常用的DOM操作方法。 首先，让我们回顾一下如何使用JavaScript来创建新的DOM元素。在提供的代码片段中，可以看到一个例子： ```javascript for (var...
当JavaScript添加新的子节点时，这些样式会应用于新元素，使界面更加美观。 4. **数据驱动**： - `data.js`可能包含了数组或对象，这些数据将被用于动态生成HTML元素。例如，如果每个"足迹"是一个对象，包含地点、...
提交表单时，新名称会被应用到节点上，并更新ZTree。 6. 扩展功能 除了基本的编辑功能，还可以扩展其他交互，如添加权限控制、验证表单数据、保存至服务器等。此外，根据需求，还可以自定义弹出层的样式和布局，以...
在本示例中，“js\vue版 工作流 节点 连线”指的是一个使用Vue.js实现的工作流系统，它允许用户通过可视化方式创建和编辑工作流程，包括定义节点和连接这些节点的连线。以下将详细探讨这个主题中的关键知识点： 1. ...