jquery写的弹出层
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.availHeight3.通过绝对定位让弹出框显示在水平，垂直居中的位置。
$("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
UIdialog
页:
[1]