文档章节

点击弹出层

沙画
 沙画
发布于 2014/11/07 10:28
字数 191
阅读 87
收藏 7
<html>
<head>
<title>点击按钮,弹出一个层</title>
<script> 
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 = "300px";   
  newDiv.style.height = "150px";   
  newDiv.style.top = "50%";   
  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 +="<br/><br/><br/><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请在新窗口完成支付!</span>";   
  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=20)";   
  newMask.style.opacity = "0.20";   
  document.body.appendChild(newMask);    
  // 关闭mask和新图层   
  var newA = document.createElement("a");   
  newA.href = "#";   
  newA.innerHTML = "点此继续";   
  newA.onclick = function() {   
   document.body.removeChild(docEle(_id));   
   document.body.removeChild(docEle(m));
   window.open ('http://www.17rice.com') 
   
   return false;   
  }   
  newDiv.appendChild(newA);   
} 
</script>    
</head>
<body>
<input type="button"  value="  点这里  " onclick="openNewDiv(1)" />
</body>
</html>

© 著作权归作者所有

沙画
粉丝 1
博文 1
码字总数 191
作品 0
成都
程序员
私信 提问
加载中

评论(2)

BryanYang
BryanYang
42美女加油~
bobdog1986
bobdog1986
79
在React中实现点击空白区域关闭指定元素的实现

从一个简单需求讲起 当我们自定义了一个弹出组件时,一个常见的需求就是要点击除了这块弹出层之外的空白区域将这个弹出层关掉。你可能会说,这还不简单,利用事件冒泡机制,在上加一个监听事...

西风瘦码
07/18
0
0
HTML5+CSS3+jQuery实现弹出层

文章来源于helloweba.com 一个基本的弹出层应该满足以下需求: 点击按钮/链接触发弹出层,弹出层应该有半透明的遮罩层; 点击弹出层的关闭按钮、取消按钮或者遮罩层会关闭隐藏弹出层; 使用E...

phala
2016/07/27
53
0
FancyBox异步加载数据,IE6下无法显示弹出层?

1.正常情况下,在页面上显示显示弹出层,然后点击这个链接,会显示弹出层 2.如果使用AJAX加载数据,并在页面上显示信息,信息如下显示弹出层,在IE6下,点击该链接,不显示弹出层,其它浏览器...

古月风
2013/09/04
519
1
1.9 Illustrator参考线的使用 [Illustrator CC教程]

本节课将为您演示,如何使用参考线,精确的定位和捕捉对象。首先依次点击[视图 > 标尺 > 显示标尺]命令。 然后点击图层面板中的[新建图层]按钮,创建一个新的图层。您将在新图层上创建参考线...

fzhlee
2018/04/08
0
0
Cocos2D-X弹出对话框的实现与封装

在用Cocos2DX引擎开发游戏的过程中,我们经常需要弹出一个对话框或者提示框,通知玩家一些必要的信息。这时候我们就需要考虑怎样设计和封装一个这样的弹出对话框。首先,这样的弹出框一般都是...

暖冰
2015/11/16
403
0

没有更多内容

加载失败,请刷新页面

加载更多

读书笔记:深入理解ES6 (五)

第五章 解构:使数据访问更便捷 第1节 为什么使用解构功能?   在ES5中,开发者们从对象、数组中获取特定数据并赋值给变量,编写了很多看起来同质化的代码。例如: 1 let options = {2 ...

张森ZS
10分钟前
7
0
CentOS7 yum方式安装MySQL5.7

在CentOS中默认安装有MariaDB,这个是MySQL的分支,但为了需要,还是要在系统中安装MySQL,而且安装完成之后可以直接覆盖掉MariaDB。 1 下载并安装MySQL官方的 Yum Repository [root@localho...

roockee
18分钟前
6
0
Allegro三种自定义设置快捷键的方法

Allegro自定义设置快捷键的三种方法: 1、在Allegro PCB editor 命令窗口直接定义 2、通过修改用户变量env文件来设置快捷键 3、定义笔画为快捷键 1、在Allegro PCB editor 命令窗口直接定义 ...

demyar
23分钟前
6
0
如何做一张能让人眼前一亮的大屏?

作为在职场驰骋的社会人,提到数据可视化大家应该都不陌生了。数据可视化的作用也不用我多说,主要是利用图形化手段,更清晰直观地将数据展示。多层次、交互式的可视化分析能够方便决策者理解...

朕想上头条
23分钟前
4
0
TL138/1808/6748-EthEVM开发板硬件CPU、FLASH、RAM

TL138/1808/6748-EthEVM是广州创龙基于SOM-TL138/1808/6748核心板开发的一款开发板,具有三个网络接口。由于SOM-TL138/1808/6748核心板管脚兼容,所以此三个核心板共用同一个底板。开发板采用...

Tronlong创龙
28分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部