- 浏览: 493143 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (191)
- Android学习 (3)
- jsp/servlet (2)
- java学习 (44)
- 数据库 (28)
- GWT开发学习 (8)
- 开发中问题 (15)
- JavaScript (48)
- 正则表达式 (1)
- svn配置 (1)
- C# (5)
- SSH (8)
- 找工作面试用 (5)
- DWR开发学习 (0)
- CSS学习 (4)
- AJAX学习 (1)
- Swing (1)
- Json (3)
- Jquery (4)
- Java 网络编程 (1)
- 管理相关 (2)
- Weblogic (1)
- 开发模式 (1)
- web前端 (6)
- 响应式设计 (1)
- Angular (5)
- 其它 (1)
- LESS (1)
- AngularJS (1)
- 负载并发、性能 (4)
- 数据结构与算法 (1)
最新评论
-
世界尽头没有你:
Java并发编程与高并发解决方案网盘地址:https://pa ...
java处理高并发高负载类网站的优化方法 -
叮咚可乐名:
Java并发编程与高并发解决方案网盘地址:https://pa ...
java处理高并发高负载类网站的优化方法 -
叮咚可乐名:
Java并发编程和高并发解决方案视频课程网盘地址:https: ...
java处理高并发高负载类网站的优化方法 -
putonyuer:
如果不是转载 , 要点总结的非常好 , 牛逼。
生产者消费者模式浅析 -
daxun1983:
爱得发疯
java判断是否为汉字和是否有汉字的方法
怎么样让弹出的DIV显示在网页的中间?
2010-10-09 17:23:12 | 分类: ASP.NET+SQL+HTML | 字号 订阅
<!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>
<style>
* {margin:0;}
body {font-size:12px;}
#container div{margin-top:5px;}
#select_city h3{float:left;}
#main_city,#all_province {clear:both;}
#main_city div,#all_province div{width:600px;clear:left;}
#main_city h4,#all_province h4{float:left;display:inline;font-size:16px;}
#main_city div span,#all_province div span{margin:0 10px;cursor:pointer;font-size:12px;}
#float_lay{width:200px;height:120px;border:1px #d1d1d1 solid;position:absolute;background:#fff;z-index:999;display:none;}
</style>
<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>
</head>
<body>
<input name="test" id="test" value="风格设置" 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">此处显示内容</div>
</div>
</div>
<br>
<br>
<br>
<input name="Input" id="test2" value="风格提示" type="button" onclick="openLayer('test2','test_con2')" />
<!--第二个弹出层的内容-->
<div id="test_con2" style="display:none" title="包含弹出层的内容的容器">
<div id="tab2">
<div id="tabtop2">
<div id="tabtop-L2"><strong style="color:blue">设置提示</strong></div>
<div id="tabtop-R2" onclick="closeLayer()"><strong style="color:red">关闭</strong></div>
</div>
<div id="tabcontent2" style="color:#dff;background:#000">
<p>此处显示提示内容"
<p>提示1
<p>提示2
</div>
</div>
</div>
<br>
<br>
<br>
<input name="Input" id="test3" value="风格演示" type="button" onclick="openLayer('test3','test_con3')" />
<!--第三个弹出层的内容-->
<div id="test_con3" style="display:none" title="包含弹出层的内容的容器">
发表评论
-
jquery 选择器,模糊匹配
2015-04-18 14:58 1839按姓名匹配 1,name前缀为aa的所有div的jquery ... -
window.addEventListener来解决让一个js事件执行多个函数
2015-01-12 15:57 1263可能你也碰到过这种情况,就是在js的代码中用了window. ... -
javascript中ie8/ie9不支持Array.indexOf解决办法
2015-01-12 15:26 1323场景:js中判断一个string是否在一个js的数组中。方法 ... -
实时Javascript开发框架Clouda、Meteor、Firebase对比
2014-05-21 10:57 1113什么是实时Javascript开发框架? 自从2009年N ... -
select边框颜色修改兼容样式
2013-10-28 10:55 5347<!DOCTYPE html PUBLIC " ... -
任意美化你的文件域 <input type="file" /> 兼容各浏览器
2013-08-31 16:23 3609样式: .fileInput{width:10 ... -
JS判断页面是否出现滚动条
2013-08-23 23:04 1377当可视区域小于页面的实际高度时,判定为出现滚动条,即: ... -
JavaScript 图片切割效果
2013-04-01 10:13 894序一(08/07/21) 很久之 ... -
显示输入剩余字数
2013-02-21 15:25 967<!DOCTYPE html PUBLIC " ... -
div固定悬浮(左侧、右侧、任意相对位置)
2013-01-08 15:14 27937<!DOCTYPE html PUBLIC " ... -
用js显示google地图总结
2012-11-26 15:37 2761功能较全的一个,可 ... -
js 计算浏览器宽度和高度
2012-11-23 11:42 2956<!DOCTYPE html PUBLIC &qu ... -
DIV固定在屏幕的中间/两侧,不随滚动条移动而改变位置
2012-09-04 18:00 7557<!DOCTYPE html PUBLIC " ... -
图片大小 图片尺寸 计算
2012-08-28 15:05 1126<!DOCTYPE HTML PUBLIC " ... -
enctype="multipart/form-data"中Form参数的获取
2012-08-22 17:40 3021enctype="multipar ... -
js动态增加删除 Table 行
2012-08-07 10:59 1351<html> <head> ... -
JS动态控制鼠标位置,DIV由隐藏显示时控制画面控制
2012-06-29 16:24 6907<!DOCTYPE html PUBLIC " ... -
CSS代替bordercolorlight与bordercolordark
2012-06-11 15:51 2823CSS代替bordercolorlight与bordercol ... -
Javscript Json数据操作(数据增,删,改,查)
2012-06-02 23:30 8104<!DOCTYPE html PUBLIC " ... -
jquery 导航代码,兼容IE6,IE7,FF,OPREA,谷歌
2012-06-02 23:04 1526jquery 导航代码,兼容IE6,IE7,FF,OPREA, ...
相关推荐
网页上的AJAX网页弹出层,弹出对话框,嵌套的网页弹出浮动层,可以关闭,可以自适应显示在网页浏览器的中央,不管浏览器窗口有多大,它都会显示在中间。运用了一个封装的JS库,实现一个浮动对话框的功能就更简单了。
实例011 弹出全屏显示的网页模式对话框 16 实例012 网页拾色器 18 实例013 日期选择器 21 1.3 窗口的动画效果 26 实例014 页面自动滚动 26 实例015 打开窗口特殊效果 27 实例016 动态显示窗口 29 实例017 慢慢放大的...
菜单美观、醒目,二级菜单可正常弹出与跳转。 5. 要有JS特效,如定时切换和手动切换图片轮播。 6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。 7. 页面清爽、美观、大方,不雷同。 。 8. 不仅要能够...
菜单美观、醒目,二级菜单可正常弹出与跳转。 要有JS特效,如定时切换和手动切换图片轮播。 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。。 页面清爽、美观、大方,不雷同。 。 不仅要能够把用户要求的...
菜单美观、醒目,二级菜单可正常弹出与跳转。 要有JS特效,如定时切换和手动切换图片轮播。 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。。 页面清爽、美观、大方,不雷同。 。 不仅要能够把用户要求的...
菜单美观、醒目,二级菜单可正常弹出与跳转。 要有JS特效,如定时切换和手动切换图片轮播。 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。 页面清爽、美观、大方,不雷同。 不仅要能够把用户要求的内容...
菜单美观、醒目,二级菜单可正常弹出与跳转。 5. 要有JS特效,如定时切换和手动切换图片轮播。 6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。 7. 页面清爽、美观、大方,不雷同。 。 8. 不仅要能够...
4. 菜单美观、醒目,二级菜单可正常弹出与跳转; 5. 要有JS特效,如定时切换和手动切换图片新闻; 6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用; 7. 页面清爽、美观、大方,不雷同1. 页面分为页头...
4. 菜单美观、醒目,二级菜单可正常弹出与跳转; 5. 要有JS特效,如定时切换和手动切换图片新闻; 6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用; 7. 页面清爽、美观、大方,不雷同1. 页面分为页头...
接下来是风云人物链接资料,点击对应人物会弹出DIV文本框显示每个棋手的风云人物资料简介,点击右边的关闭按钮会关闭整个弹出的文本框,非常方便适宜网站的总体要求。接下来是国外盛况介绍,下面依次是四张围棋手的...
4. 菜单美观、醒目,二级菜单可正常弹出与跳转; 5. 要有JS特效,如定时切换和手动切换图片新闻; 6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用; 7. 页面清爽、美观、大方,不雷同1. 页面分为页头...
4. 菜单美观、醒目,二级菜单可正常弹出与跳转; 5. 要有JS特效,如定时切换和手动切换图片新闻; 6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用; 7. 页面清爽、美观、大方,不雷同1. 页面分为页头...
这种效果的好处就是,可以让用户聚焦到弹出的菜单中。 神说,有代码的文章,应该有个 Demo ,于是就有了Demo。 HTML 结构 首先先来分析一下这个过程:触发某个事件(例如点击按钮),然后出现一个背景遮罩上面还有一...
4. 菜单美观、醒目,二级菜单可正常弹出与跳转; 5. 要有JS特效,如定时切换和手动切换图片新闻; 6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用; 7. 页面清爽、美观、大方,不雷同。航栏(最好可...
3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最...
3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最...
53:关闭弹出两窗口的代码下载 54:鼠标经过即弹出广告代码下载 55:按钮跳出广告代码下载 56:左边底部悬浮代码下载 57:滑动展开/收缩广告代码下载 58:点空白页面也弹出代码下载 59:置顶收栏关闭效果代码下载 60:...
53:关闭弹出两窗口的代码下载 54:鼠标经过即弹出广告代码下载 55:按钮跳出广告代码下载 56:左边底部悬浮代码下载 57:滑动展开/收缩广告代码下载 58:点空白页面也弹出代码下载 59:置顶收栏关闭效果代码下载 60:...
如图,在浏览器的左上方是两个button按钮,按下之后分别弹出左下角的窗口和中间的窗口,右下角的窗口当页面加载完成之后自动慢慢显示,之后又徐徐的淡出。基于div+css的模式,我们的先来建立html页面。 window.html ...
实例206 弹出全屏显示的网页模式对话框 261 实例207 关闭IE主窗口时不弹出询问对话框 262 实例208 弹出提示对话框并重定向网页 263 实例209 自动关闭的广告窗口 264 实例210 在弹出的对话框中选择个性头像 265 实例...