`

JS弹出层效果

    博客分类:
  • html
阅读更多
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层效果</title>
</head>

<script src = "./openNewDiv.js"></script>

<body>
<a href="#" onclick="openNewDiv('newDiv');return false;">激活新层</a>
<p>网页内容</p>
</body>
</html>

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 = "200px";
  newDiv.style.top = "160px";
  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 = "关闭激活层";
  newA.onclick = function() {
   document.body.removeChild(docEle(_id));
   document.body.removeChild(docEle(m));
   return false;
  }
  newDiv.appendChild(newA);
}



博客已移至http://blog.aboutc.net/欢迎访问
分享到:
评论

相关推荐

    javascript弹出层效果!!

    js弹出层效果js弹出层效果js弹出层效果js弹出层效果js弹出层效果js弹出层效果js弹出层效果js弹出层效果js弹出层效果js弹出层效果

    js弹出层效果

    根据提供的文档信息,本文将详细解析“js弹出层效果”的实现原理、代码结构以及应用场景。此案例展示了如何创建一个兼容IE6、IE8、Firefox(FF)和Chrome等浏览器的JavaScript弹出层。 ### 一、弹出层概述 在网页...

    js 弹出层 效果 仿百度

    总结来说,js弹出层效果的实现涉及HTML结构、CSS样式和JavaScript逻辑的结合,通过精心设计和编程,可以为用户提供一种直观且吸引人的交互体验。在这个案例中,我们可以通过分析和学习提供的文件,掌握创建类似百度...

    简单精美js弹出层效果

    "简单精美js弹出层效果"这个主题,就是关于如何使用JavaScript来创建既美观又易于使用的弹出层。 首先,我们需要理解弹出层的基本概念。弹出层,也称为模态窗口或对话框,是在网页主内容上覆盖的一个浮动元素,通常...

    Javascript 弹出层效果

    JavaScript弹出层效果是一种常见的网页交互设计,它允许在用户与网页交互时显示额外的信息或功能,而不会离开当前页面。这种技术广泛应用于提示、警告、登录框、模态对话框以及各种用户反馈形式。在本篇文章中,我们...

    JS弹出层效果,可以弹出图片等

    "JS弹出层效果,可以弹出图片等"这个主题主要涉及到JavaScript技术以及如何利用它来创建具有视觉吸引力的用户体验。 Light Window是一个流行的JavaScript库,特别设计用来实现弹出层效果。在这个例子中,我们讨论的...

    JS弹出层,js弹出DIV效果源码下载

    JavaScript(简称JS)是一种轻量...通过以上步骤,我们可以构建一个功能完善的JS弹出层效果,提供给用户更加直观、互动的网页体验。同时,源码学习和分享是提升个人技能的有效途径,对于初学者和开发者来说都极具价值。

    JavaScript弹出层效果代码

    JavaScript弹出层效果是网页设计中常见的交互元素,主要用于显示重要的信息、提示或者进行用户交互。在本案例中,"JavaScript弹出层效果代码"是一个实现点击后弹出层淡入淡出效果的功能,通常用于增强用户体验,使...

    JS弹出层效果使用jquery实现

    本教程将详细介绍如何使用JavaScript和jQuery库,结合pop.js插件来创建弹出层效果。jQuery是一个轻量级、高性能的JavaScript库,简化了DOM操作、事件处理和动画效果,而pop.js则是一个专门用于创建弹出层效果的插件...

    JS 弹出层 效果炫

    JavaScript(简称JS)是一种轻量级的脚本语言,常用于网页交互和动态...总的来说,JS弹出层的实现是一个综合运用HTML、CSS和JavaScript的过程,通过巧妙的编程技巧,我们可以创建出功能强大且视觉效果出众的弹出层。

    JavaScript弹出层

    JavaScript弹出层是网页开发中常见的一种交互设计,它用于在用户与页面交互时提供额外信息、确认操作或展示复杂内容。Js弹出层库则是专门为此目的设计的JavaScript库,简化了弹出层的创建和管理过程。在这个场景中,...

    JS弹出层源代码

    3. **JavaScript逻辑**:JS主要用于控制弹出层的显示和隐藏。这可以通过改变元素的CSS属性(如display或visibility)来实现。同时,还可以添加事件监听器,如点击按钮触发弹出层,或者点击弹出层外的区域关闭弹出层...

    js弹出层 城市切换效果

    JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,实现动态内容、用户交互、...通过这些步骤,你可以构建一个功能完善的JavaScript弹出层城市切换效果,为用户提供流畅且直观的交互体验。

    [WEB开源]弹出层效果

    【标题】:“[WEB开源]弹出层效果” 在网页设计和开发中,"弹出层效果"是一种常见的用户交互模式,它允许在用户与页面交互时显示额外的信息或者功能,而不会离开当前页面。这种效果通常是通过JavaScript、CSS以及...

    18种非常实用的js弹出层

    在前端开发中,JavaScript弹出层(也称为模态窗口或对话框)是不可或缺的交互元素,它们用于显示额外信息、获取用户输入或执行特定操作。"18种非常实用的js弹出层"集合提供了多种不同的实现方式,旨在帮助开发者在...

    javascript九种自定义弹出层效果

    以下是对"javascript九种自定义弹出层效果"这一主题的详细解释: 1. **基础弹出层**:这是最简单的弹出层实现,通过创建一个CSS隐藏的元素,在需要时用JavaScript显示。可以使用`document.getElementById()`获取...

    js超漂亮的仿腾讯弹出层效果实例源码

    本实例是基于JavaScript实现的一个“超漂亮的仿腾讯弹出层效果”,旨在为开发者提供一个美观且实用的弹出层解决方案。下面我们将详细探讨这个实例中涉及的技术点。 首先,我们来分析“仿腾讯弹出层效果”这一概念。...

    JS弹出层大集合。很多好用的JS弹出层代码

    JavaScript(简称JS)弹出层是一种常见的网页交互设计,它可以在用户与网页交互时弹出一个浮动窗口,显示额外的信息、提示或者进行某些操作。在网页开发中,弹出层通常用于实现模态对话框、警告提示、信息确认、表单...

    javascript弹出层

    JavaScript弹出层是一种常见的网页交互元素,用于在用户与页面交互时显示额外信息或功能。在网页设计中,弹出层通常用来展示警告、提示、表单、图片、广告等,而无需离开当前页面。本篇文章将深入探讨如何使用...

    可自定义js弹出层动画特效.zip

    在这个"可自定义js弹出层动画特效.zip"压缩包中,我们找到了一个JavaScript弹出层插件,它专门设计用来增强用户体验,提供多样化的弹出层显示方式。 首先,让我们了解一下弹出层(Popup Layer)的概念。弹出层是在...

Global site tag (gtag.js) - Google Analytics