jquery写的弹出层

ice-cream

浏览: 329136 次
性别:
来自: 上海

最近访客更多访客>>

fly-sky

zcm1205

ryan.liu

灰袍人

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Jquery

jQuery CSS Web JavaScript UI

index.html

<body>
<div class="field"><input type="checkbox" id="choose"/><label for="choose">查看历史记录</label><select><option>ie6</option></select></div>
<div class="comparison"><div>
</body>

popUpBox.html

<ul>
	<li class="left">
		<h3>޸描述</h3>	<div>wwwwwwwwwwwwwwwwwwwwwwww1wwwwwwwwwwwwwwwwwww5wwwwwwwwwwwwwwwwwwwwww4wwwwwwwwwwwwwwwwwww1wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww1wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww3wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww2wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>
	</li>
	<li class="right">
		<h3>޸描述</h3>
		<div>07年将是web标准大面积推广的年份07年将是web标准大面积推广的年07年将是web标准大面积推广的年份07年将是web标准大面积推广的年07年将是web标准大面积推广的年份07年将是web标准大面积推广的年07年将是web标准大面积推广的年份07年将是web标准大面积推广的年07年将是web标准大面积推广的年份07年将是web标准大面积推广的年07年将是web标准大面积推广的年份07年将是web标准大面积推广的年07年将是web标准大面积推广的年份07年将是web标准大面积推广的年07年将是web标准大面积推广的年份07年将是web标准大面积推广的年</div>
	</li>
</ul>
<span class="close">CLOSE</span>

css

<style>
	ul,li,h3,div{ margin:0;padding:0;font-size:12px;}
	div.comparison{display:none;z-index:3;position:absolute;width:800px;border:2px dashed #333;background-color:#fff;padding:10px;}
	ul{list-style-type:none;clear:both;overflow:hidden;height:120px;}
	li.left{float:left;width:395px;}
	li.right{width:395px;float:right;}
	h3,span.close{color:green;font-size:16px;}
	span.close{float:right;font-weight:bold;cursor:pointer;}
	li div{word-wrap:break-word;overflow:auto;border:1px solid #333;max-height:80px;_height:auto;padding:3px;margin:10px 0;}
	.wrap{z-index:1;background-color:#000;opacity:0.1;filter:alpha(opacity:10);position:absolute;left:0;top:0;width:100%;}
	iframe.ie6Bug{border:0;z-index:2;position:absolute;left:0;top:0;width:100%;background-color:#000;}
</style>

javascript

<script type="text/javascript">
	$(document).ready(function(){
		function browserIe(){
			if ($.browser.msie && $.browser.version < 7) {
			   $("li div").each(function(){
					var HeightValue = $(this).height();
					if(HeightValue >= 80){
						$(this).css("height","80px");
				   }
				   else{
						$(this).css("height","auto");
				   }
			   });
			}
		}
		function closeEvent(){
			$("span.close").click(function(){
				$(".wrap,div.comparison,iframe.ie6Bug").hide();
				$(".field #choose").attr("checked","");
				$("select").show();
			});
		}
		$("#choose").bind("click",function(event){
			$(".comparison").load("popUpBox.html",function(){
				var bodyWidth = document.documentElement.clientWidth;       
				if($("#choose").attr("checked")){
					$("<div class='wrap'></div>").appendTo("body");
					if ($.browser.msie && $.browser.version < 7) {
						$("<iframe class='ie6Bug'></iframe>").appendTo("body");
						$("select").hide();
						$(".wrap").width($(document).width()-21);
						$(".wrap").height($(document).height()-4);
					}
					$(".ie6Bug").width(parseInt($(".comparison").width()) + parseInt($(".comparison").css("padding-left")) + parseInt($(".comparison").css("padding-right")));
					$(".ie6Bug").height(parseInt($(".comparison").height()) + parseInt($(".comparison").css("padding-top")) + parseInt($(".comparison").css("padding-bottom")));
					$("div.comparison,.ie6Bug").css({"left":(bodyWidth-$('div.comparison').width()) / 2 + "px","top":(document.documentElement.clientHeight-$('div.comparison').height()) / 2 + document.documentElement.scrollTop + "px"}).show();
					browserIe();
					closeEvent();
				}	
			});
		});
	})
</script>

1 . 通过ajax方法在当前index页面点击input后load一个新页面popUpBox.

2 . 为了区分弹出层内容和当前页的内容，需要在中间插入一个层，给背景色，用滤镜调整透明度。

动态获取当前页面的宽度。

var bodyWidth = document.documentElement.clientWidth;

document.documentElement.clientHeight指当前浏览器的可视范围内高度。

关于怎么取页面宽度高度的各种问题大家可以googe一下，方法很多。

http://www.jzym.net/article/sort019/sort0302/sort0318/info-3634.html

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域高： document.body.offsetWeight //包括边线的宽
网页可见区域高： document.body.offsetHeight   //包括边线的宽
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区宽度： window.screen.availWidth
屏幕可用工作区高度： window.screen.availHeight

3 .通过绝对定位让弹出框显示在水平，垂直居中的位置。

$("div.comparison,.ie6Bug").css({"left":(bodyWidth-$('div.comparison').width()) / 2 + "px","top":(document.documentElement.clientHeight-$('div.comparison').height()) / 2 + document.documentElement.scrollTop + "px"}).show();

left：用（浏览器的可视宽度-弹出层的宽度）/2

top：用（浏览器的一屏高度-弹出层的高度）/2 + 纵向滚动条滚过的高度

4 .解决ie6的bug

a.如果弹出层下面是select框就遮不住，需要在当前页面和弹出层之间加一个iframe层就可以遮住当前页面的select，iframe层的大小和弹出层的大小一样。

b.弹出层以外的select框只有当弹出层出现后让select框隐藏，关闭弹出层后在让select框出现

c.或者用input框+js来模拟select框就不会出现a，b的问题。

5 .弹出层里的内容是两个div模拟的文本框，用max-height给最大高度，ie6不认max-height.

那么判断当前浏览器和版本，用js动态取文本框的高度来设定最大高度

6 .jquery的两个弹出层插件

UI Block

UI dialog

popUpBox.zip (31.7 KB)
下载次数: 906

15
顶

9
踩

分享到：

我们UED的合影 | 文本溢出时显示省略标记

2008-11-30 23:48
浏览 13762
评论(6)
分类:Web前端
查看更多

6 楼 wangzhen1984815 2008-12-02

学习，谢谢

5 楼 yucc77 2008-12-01

果然是在学习

4 楼 linginfanta 2008-12-01

你又造了一个轮子。

3 楼 ice-cream 2008-12-01

playfish 写道

弹出层。。。为什么还要造轮子呢。。jquery很多插件有这个效果的。另外官方的也有dialog UI，还有一个blockUI插件也很强大

那都是别人写的现成的，自己写一个体验一下，学习学习。

2 楼 playfish 2008-12-01

弹出层。。。为什么还要造轮子呢。。jquery很多插件有这个效果的。另外官方的也有dialog UI，还有一个blockUI插件也很强大

1 楼上一站，火星 2008-12-01

Math.max(document.documentElement.clientHeight,document.body.scrollHeight);

恩，这个方法比较好用

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论