<script type="text/javascript">
var docEle = function()
{
return document.getElementById(arguments[0]) || false;
}
function openNewDiv(_id)
{
var m = "mask";
if (docEle(_id)) document.body.removeChild(docEle(_id));
if (docEle(m)) document.body.removeChild(docEle(m));
//mask遮罩层
var newMask = document.createElement("div");
newMask.id = m;
newMask.style.position = "absolute";
newMask.style.zIndex = "1";
_scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
_scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
newMask.style.width = _scrollWidth + "px";
newMask.style.height = _scrollHeight + "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
newMask.style.background = "#33393C";
newMask.style.filter = "alpha(opacity=40)";
newMask.style.opacity = "0.40";
document.body.appendChild(newMask);
//新弹出层
var newDiv = document.createElement("div");
newDiv.id = _id;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999";
newDivWidth = 400;
newDivHeight = 200;
newDiv.style.width = newDivWidth + "px";
newDiv.style.height = newDivHeight + "px";
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
newDiv.style.background = "#EFEFEF";
newDiv.style.border = "1px solid #860001";
newDiv.style.padding = "5px";
newDiv.innerHTML = "弹出层内容 ";
document.body.appendChild(newDiv);
//弹出层滚动居中
function newDivCenter()
{
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
}
if(document.all)
{
window.attachEvent("onscroll",newDivCenter);
}
else
{
window.addEventListener('scroll',newDivCenter,false);
}
//关闭新图层和mask遮罩层
var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "关闭";
newA.onclick = function()
{
if(document.all)
{
window.detachEvent("onscroll",newDivCenter);
}
else
{
window.removeEventListener('scroll',newDivCenter,false);
}
document.body.removeChild(docEle(_id));
document.body.removeChild(docEle(m));
return false;
}
newDiv.appendChild(newA);
}
</script>
<body>
<a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">qifei弹层</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">qifei弹层</a>
</body>
分享到：
相关推荐
js弹出层效果js弹出层效果js弹出层效果js弹出层效果js弹出层效果js弹出层效果js弹出层效果js弹出层效果js弹出层效果js弹出层效果
根据提供的文档信息，本文将详细解析“js弹出层效果”的实现原理、代码结构以及应用场景。此案例展示了如何创建一个兼容IE6、IE8、Firefox（FF）和Chrome等浏览器的JavaScript弹出层。 ### 一、弹出层概述 在网页...
总结来说，js弹出层效果的实现涉及HTML结构、CSS样式和JavaScript逻辑的结合，通过精心设计和编程，可以为用户提供一种直观且吸引人的交互体验。在这个案例中，我们可以通过分析和学习提供的文件，掌握创建类似百度...
"简单精美js弹出层效果"这个主题，就是关于如何使用JavaScript来创建既美观又易于使用的弹出层。 首先，我们需要理解弹出层的基本概念。弹出层，也称为模态窗口或对话框，是在网页主内容上覆盖的一个浮动元素，通常...
JavaScript弹出层效果是一种常见的网页交互设计，它允许在用户与网页交互时显示额外的信息或功能，而不会离开当前页面。这种技术广泛应用于提示、警告、登录框、模态对话框以及各种用户反馈形式。在本篇文章中，我们...
"JS弹出层效果，可以弹出图片等"这个主题主要涉及到JavaScript技术以及如何利用它来创建具有视觉吸引力的用户体验。 Light Window是一个流行的JavaScript库，特别设计用来实现弹出层效果。在这个例子中，我们讨论的...
JavaScript（简称JS）是一种轻量...通过以上步骤，我们可以构建一个功能完善的JS弹出层效果，提供给用户更加直观、互动的网页体验。同时，源码学习和分享是提升个人技能的有效途径，对于初学者和开发者来说都极具价值。
JavaScript弹出层效果是网页设计中常见的交互元素，主要用于显示重要的信息、提示或者进行用户交互。在本案例中，"JavaScript弹出层效果代码"是一个实现点击后弹出层淡入淡出效果的功能，通常用于增强用户体验，使...
本教程将详细介绍如何使用JavaScript和jQuery库，结合pop.js插件来创建弹出层效果。jQuery是一个轻量级、高性能的JavaScript库，简化了DOM操作、事件处理和动画效果，而pop.js则是一个专门用于创建弹出层效果的插件...
JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页交互和动态...总的来说，JS弹出层的实现是一个综合运用HTML、CSS和JavaScript的过程，通过巧妙的编程技巧，我们可以创建出功能强大且视觉效果出众的弹出层。
JavaScript弹出层是网页开发中常见的一种交互设计，它用于在用户与页面交互时提供额外信息、确认操作或展示复杂内容。Js弹出层库则是专门为此目的设计的JavaScript库，简化了弹出层的创建和管理过程。在这个场景中，...
3. **JavaScript逻辑**：JS主要用于控制弹出层的显示和隐藏。这可以通过改变元素的CSS属性（如display或visibility）来实现。同时，还可以添加事件监听器，如点击按钮触发弹出层，或者点击弹出层外的区域关闭弹出层...
JavaScript（简称JS）是一种轻量级的脚本语言，广泛应用于网页和网络应用开发，实现动态内容、用户交互、...通过这些步骤，你可以构建一个功能完善的JavaScript弹出层城市切换效果，为用户提供流畅且直观的交互体验。
【标题】：“[WEB开源]弹出层效果” 在网页设计和开发中，"弹出层效果"是一种常见的用户交互模式，它允许在用户与页面交互时显示额外的信息或者功能，而不会离开当前页面。这种效果通常是通过JavaScript、CSS以及...
在前端开发中，JavaScript弹出层（也称为模态窗口或对话框）是不可或缺的交互元素，它们用于显示额外信息、获取用户输入或执行特定操作。"18种非常实用的js弹出层"集合提供了多种不同的实现方式，旨在帮助开发者在...
以下是对"javascript九种自定义弹出层效果"这一主题的详细解释： 1. **基础弹出层**：这是最简单的弹出层实现，通过创建一个CSS隐藏的元素，在需要时用JavaScript显示。可以使用`document.getElementById()`获取...
本实例是基于JavaScript实现的一个“超漂亮的仿腾讯弹出层效果”，旨在为开发者提供一个美观且实用的弹出层解决方案。下面我们将详细探讨这个实例中涉及的技术点。 首先，我们来分析“仿腾讯弹出层效果”这一概念。...
JavaScript（简称JS）弹出层是一种常见的网页交互设计，它可以在用户与网页交互时弹出一个浮动窗口，显示额外的信息、提示或者进行某些操作。在网页开发中，弹出层通常用于实现模态对话框、警告提示、信息确认、表单...
JavaScript弹出层是一种常见的网页交互元素，用于在用户与页面交互时显示额外信息或功能。在网页设计中，弹出层通常用来展示警告、提示、表单、图片、广告等，而无需离开当前页面。本篇文章将深入探讨如何使用...
在这个"可自定义js弹出层动画特效.zip"压缩包中，我们找到了一个JavaScript弹出层插件，它专门设计用来增强用户体验，提供多样化的弹出层显示方式。 首先，让我们了解一下弹出层（Popup Layer）的概念。弹出层是在...