dengwenjun
- 浏览: 214297 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
//弹出层
function openLayer(objId,conId){
var arrayPageSize = getPageSize();//调用getPageSize()函数
var arrayPageScroll = getPageScroll();//调用getPageScroll()函数
if (!document.getElementById("popupAddr")){
//创建弹出内容层
var popupDiv = document.createElement("div");
//给这个元素设置属性与样式
popupDiv.setAttribute("id","popupAddr")
popupDiv.style.position = "absolute";
popupDiv.style.border = "1px solid #ccc";
popupDiv.style.background = "#fff";
popupDiv.style.zIndex = 99;
//创建弹出背景层
var bodyBack = document.createElement("div");
bodyBack.setAttribute("id","bodybg")
bodyBack.style.position = "absolute";
bodyBack.style.width = "100%";
bodyBack.style.height = (arrayPageSize[1] + 35 + 'px');
bodyBack.style.zIndex = 98;
bodyBack.style.top = 0;
bodyBack.style.left = 0;
bodyBack.style.filter = "alpha(opacity=50)";
bodyBack.style.opacity = 0.5;
bodyBack.style.background = "#ddf";
//实现弹出(插入到目标元素之后)
var mybody = document.getElementById(objId);
insertAfter(popupDiv,mybody);//执行函数insertAfter()
insertAfter(bodyBack,mybody);//执行函数insertAfter()
}
//显示背景层
document.getElementById("bodybg").style.display = "";
//显示内容层
var popObj=document.getElementById("popupAddr")
popObj.innerHTML = document.getElementById(conId).innerHTML;
popObj.style.display = "";
//让弹出层在页面中垂直左右居中(统一)
// popObj.style.width = "600px";
// popObj.style.height = "400px";
// popObj.style.top = arrayPageScroll[1] + (arrayPageSize[3] - 35 - 400) / 2 + 'px';
// popObj.style.left = (arrayPageSize[0] - 20 - 600) / 2 + 'px';
//让弹出层在页面中垂直左右居中(个性)
var arrayConSize=getConSize(conId)
popObj.style.top = arrayPageScroll[1] + (arrayPageSize[3] - arrayConSize[1]) / 2-50 + 'px';
popObj.style.left = (arrayPageSize[0] - arrayConSize[0]) / 2 -30 + 'px';
}
//获取内容层内容原始尺寸
function getConSize(conId){
var conObj=document.getElementById(conId)
conObj.style.position = "absolute";
conObj.style.left=-1000+"px";
conObj.style.display="";
var arrayConSize=[conObj.offsetWidth,conObj.offsetHeight]
conObj.style.display="none";
return arrayConSize;
}
function insertAfter(newElement,targetElement){//插入
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}
else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
//获取滚动条的高度
function getPageScroll(){
var yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
yScroll = document.documentElement.scrollTop;
} else if (document.body) {
yScroll = document.body.scrollTop;
}
arrayPageScroll = new Array('',yScroll)
return arrayPageScroll;
}
//获取页面实际大小
function getPageSize(){
var xScroll,yScroll;
if (window.innerHeight && window.scrollMaxY){
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){
sScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else {
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth,windowHeight;
//var pageHeight,pageWidth;
if (self.innerHeight) {
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) {
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
var pageWidth,pageHeight
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
if(xScroll < windowWidth) {
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
//关闭弹出层
function closeLayer(){
document.getElementById("popupAddr").style.display = "none";
document.getElementById("bodybg").style.display = "none";
return false;
}
</script>
<style type="text/css">
</style>
</head>
<body>
<input name="Input" id="test" value="风格设置1" type="button"
onclick="openLayer('test','test_con')" />
<!--第一个弹出层的内容-->
<div id="test_con" style="display: none" title="包含弹出层的内容的容器">
<div id="tab">
<!--<div id="tabtop">
<div id="tabtop-L">
<strong>风格设置</strong>
</div>
<div id="tabtop-R" onclick="closeLayer()">
<strong>关闭</strong>
</div>
</div> -->
<div id="tabcontent" class="c-float-modePop">
此处显示内容
</div>
</div>
</div>
</body>
</html>
分享到：
发表评论
-
Math.round(Math.random() * 10000); //随机函数名
2013-07-23 18:05 1581Math.round(Math.random() * 1000 ... -
js弹出层代码(兼容多浏览器)
2013-06-18 15:42 924<!DOCTYPE html PUBLIC " ... -
input type='file'的值的清理
2013-05-14 11:05 1093function refreshUploader(who){ ... -
js改变选择的行颜色
2013-05-08 09:56 0<html> <script> ... -
js实现表格选择行变色
2013-05-08 09:51 0<!DOCTYPE html PUBLIC " ... -
js 动态table crud
2013-04-27 17:36 1215<%@ page language="java ... -
js 获得文件大小
2013-04-27 17:37 1754<!DOCTYPE html PUBLIC " ... -
all the way around
2012-08-14 19:49 0all the way around,Bye Bye Bye, ... -
浏览器 跨域仿问
2010-07-23 16:45 925一种是修改firefox的设置，在firefox的地址栏中输入 ...
相关推荐
在ASP.NET开发中，"NET弹出层弹出div"是一种常见的交互设计，它允许用户在不离开当前页面的情况下与一些额外的信息或功能进行交互。弹出层通常用于显示详细信息、表单输入、警告消息等，提高了用户体验，因为它们不...
结合JavaScript（尤其是jQuery库）可以实现丰富的交互效果，比如滑动弹出div的效果。这种效果常见于下拉菜单、模态框或者侧边栏等，能够提供良好的用户体验，使网站更具动态感和吸引力。 首先，我们要理解CSS在实现...
本文将深入探讨如何使用JavaScript实现弹出div，以及如何返回原来的页面。 首先，我们需要理解什么是弹出div。在HTML中，div是一个常用的布局元素，可以用来组织和分隔内容。在JavaScript中，通过改变CSS样式，我们...
在网页设计中，"滚动条到底部弹出div"是一种常见的交互效果，它通常用于实现无限滚动、加载更多内容或显示底部菜单等场景。这个功能是通过JavaScript和CSS结合实现的，下面我们将详细探讨如何实现这个效果。 首先，...
JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子...
**jQuery弹出DIV详解** 在Web开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理以及动画效果。"Jquery弹出DIV"是指利用jQuery来实现一个可交互的模态对话框（通常称为弹出窗口或浮层）...
在本实例中，我们将深入探讨如何使用JavaScript来创建一个弹出DIV层窗口。 首先，我们需要了解HTML结构。`index.htm`和`test.html`文件可能包含了用于展示弹出窗口的基础HTML元素。通常，一个基本的HTML结构会包括...
本资源“jQuery插件集之(弹出div4)+Demo”提供了一个实用的解决方案，即用div而非模态窗口实现弹出功能。这个插件设计巧妙，能够为用户提供一种灵活的方式来展示信息，而无需依赖于传统的模态框。 首先，让我们深入...
在这个场景中，我们关注的是如何使用jQuery结合magnific-popup插件来实现一个弹出Div模式窗口的功能。 `jquery.magnific-popup.js`是magnific popup插件的核心脚本，它提供了一种优雅的方式来创建各种类型的弹出...
本项目"jquery弹出div+异步加载数据"旨在实现一个功能丰富的用户界面，其中包含一个可拖动的弹出div，并能通过异步方式从服务器获取并显示数据。下面我们将详细探讨这个项目中的关键知识点。 首先，**jQuery弹出div...
在页面加载后或者点击页面的某个链接时弹出一个div层，同时页面的其他地方会变灰
**jQuery弹出div层窗口** 在网页开发中，jQuery提供了便捷的方式来创建动态的、可交互的弹出div层窗口。这种技术通常用于显示警告、消息、表单或任何需要用户注意的内容。创建一个弹出div层窗口的关键在于利用...
这个“JS弹出Div窗口(可拖拽)”的示例就是一个解决此类需求的实用方案。 首先，让我们深入理解Div元素。Div是HTML中的一个块级元素，它可以容纳其他HTML元素并进行样式化。通过CSS，我们可以设置Div的宽高、边距、...
简洁清爽的弹出div效果，内含css，可迅速移植
JS弹出DIV浮层.
在给定的标题和描述中提到的"弹出DIV层窗口"是指使用HTML、CSS和JavaScript实现的浮动窗口效果。这种技术常用于创建模态对话框或轻量级的弹出窗口。 首先，让我们深入理解HTML部分： ```html <!DOCTYPE ...
完美弹出div窗口 修改版 完美遮罩 修复JQuery对浏览器判断的bug 支持IE6,7,8,FF jspanduanIE.html test无边框iframe完美遮罩.html demo.html 多种测试页面
当我们说“弹出div”，就是指让一个<div>元素在页面上以弹出窗口的形式出现。 实现js弹出div效果，通常包括以下几个步骤： 1. **创建<div>元素**：在HTML文档中定义一个<div>元素，并为其设置相应的ID以便在...
基本的网页弹出div层效果，带关闭按钮。div层浮动在原网页之上。
在网页设计和开发中，创建一个可拖动的弹出div层是非常常见且实用的技术，尤其是在构建用户交互界面时。标题“弹出div拖动层”所指的就是这样一个功能，它允许用户通过鼠标来移动一个浮层div，这种功能常见于对话框...