JavaScript 层
代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><script language="javascript">
var docEle = function() {
return document.getElementById(arguments[0]) || false;
}
function openNewDiv(_id) {
var m = "mask";
if (docEle(_id)) document.removeChild(docEle(_id));
if (docEle(m)) document.removeChild(docEle(m)); // 新激活图层
var newDiv = document.createElement("div");
newDiv.id = _id;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999";
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 = "#EFEFEF";
newDiv.style.border = "1px solid #860001";
newDiv.style.padding = "5px";
newDiv.innerHTML = "新激活图层内容 ";
document.body.appendChild(newDiv); // mask图层
var newMask = document.createElement("div");
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)";
newMask.style.opacity = "0.40";
document.body.appendChild(newMask);
// 关闭mask和新图层 var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "X";
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>
<p> 网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
</body>
JavaScript 层的更多相关文章
- [Javascript] 层控制(隐藏、显示、卷起、展开)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript开源跨平台框架NativeScript
NativeScript是一款使用JavaScript语言来构建跨平台原生移动应用的开源框架,支持iOS.Android和Windows Phone.且NativeScript的使用没有过多繁杂的要求 ...
- [欣赏代码片段] (JavaScript) Responsive jQuery
jQuery(document).ready(function($) { /* getting viewport width*/ var responsive_viewport = $(window) ...
- 腾讯Web前端开发框架JX(Javascript eXtension tools)
转自:Web前端开发-Web前端工程师 » 腾讯Web前端开发框架JX(Javascript eXtension tools) JX – Javascript eXtension tools 一个类似 ...
- React-Native系列Android——Native与Javascript通信原理（一）
React-Native最核心的是Native与Javascript之间的通信,并且是双向通信.Native层到Javascript层,Javascript层到Native层.虽说是两个方向,但实现上 ...
- XSS原理
跨站脚本攻击(Cross-Site Scripting),是一种网站应用程序的安全漏洞,是代码注入攻击的一种. XSS的种类: 反射型XSS: 非持久型XSS(需要自行触发,输入-输出). ...
- 深入浅出node(3) 异步I/O
这篇主要整理深入浅出Node.js第三章 异步I/O 一) 异步I/O的原因 二)异步I/O实现现状 2.1 异步I/O与非阻塞I/O 2.2 轮询 2.3 理想的非阻塞异步I/O 2.4 现实的异步 ...
- 使用面向 iOS 的本机插件扩展 PhoneGap
本文细致探讨了 Xcode(以 iOS 设备为目标)中的 PhoneGap(也称为 Apache Cordova)应用程序本机插件.如果您刚开始接触 PhoneGap 或者需要回顾 PhoneGap ...
- 让DIV实现抖动效果！
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
随机推荐
- GIMP语言设置
初学GIMP,需要设置语言:点击 编辑 - 首选项 其他的配置如: 配置快捷键 自己熟悉吧!
- Cplex: MIP Callback Interface
*本文主要记录和分享学习到的知识,算不上原创 *参考文献见链接 这篇文章主要记录一些Cplex的Callback的使用方法,采用Java语言. https://www.ibm.com/support/ ...
- PAT Basic 1047
1047 编程团体赛 编程团体赛的规则为:每个参赛队由若干队员组成:所有队员独立比赛:参赛队的成绩为所有队员的成绩和:成绩最高的队获胜. 现给定所有队员的比赛成绩,请你编写程序找出冠军队. 输入格式: ...
- Linux下Tomcat的安装和部署
一.安装tomcat 1.下载tomcat安装包apache-tomcat-7.0.62.tar.gz和jdk1.7 2.安装tomcat,将apache-tomcat-7.0.62.tar.gz复制 ...
- bluej
他山之石,可以攻玉!吾辈之道,披荆斩棘! 个人源码地址: https://gitee.com/blue_phantom
- ubuntu搭建LAMP全教程
http://jingyan.baidu.com/article/a681b0de36ad683b18434691.html 本经验向你展示如何在ubuntu14.04 环境下搭建apache2 + ...
- java 词频统计代码
package hello; import java.io.BufferedReader; import java.io.FileNotFoundException; import java.io.F ...
- 九度oj 题目1086：最小花费
题目描述: 在某条线路上有N个火车站,有三种距离的路程,L1,L2,L3,对应的价格为C1,C2,C3.其对应关系如下: 距离s 票价 0<S<=L1 ...
- 解开Future的神秘面纱之任务执行
此文承接之前的博文 解开Future的神秘面纱之取消任务 补充一些任务执行的一些细节,并从全局介绍程序的运行情况. 任务提交到执行的流程 前文我们已经了解到一些Future的实现细节,这里我们来梳理一 ...
- POJ 2914 Minimum Cut 全局最小割
裸的全局最小割了吧 有重边,用邻接矩阵的时候要小心 #include<iostream> #include<cstdio> #include<bitset> #in ...