码迷,mamicode.com
首页 > 其他好文 > 详细

点击弹出层

时间:2014-11-07 13:15:56      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:style   http   io   ar   os   sp   div   on   cti   

<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>

点击弹出层

标签:style   http   io   ar   os   sp   div   on   cti   

原文地址:http://my.oschina.net/u/1987515/blog/341770

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!