jquery写的弹出层

最新推荐文章于 2025-08-05 11:59:12 发布

最新推荐文章于 2025-08-05 11:59:12 发布 · 174 阅读

文章标签：

#jQuery #CSS #Web #JavaScript #UI #ViewUI

jquery 专栏收录该内容

28 篇文章

订阅专栏

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