jquery写的弹出层

index.html

Html代码 复制代码
  1. <body>
  2. <divclass="field"><inputtype="checkbox"id="choose"/><labelfor="choose">查看历史记录</label><select><option>ie6</option></select></div>
  3. <divclass="comparison"><div>
  4. </body>
<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

Html代码 复制代码
  1. <ul>
  2. <liclass="left">
  3. <h3>޸描述</h3><div>wwwwwwwwwwwwwwwwwwwwwwww1wwwwwwwwwwwwwwwwwww5wwwwwwwwwwwwwwwwwwwwww4wwwwwwwwwwwwwwwwwww1wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww1wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww3wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww2wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>
  4. </li>
  5. <liclass="right">
  6. <h3>޸描述</h3>
  7. <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>
  8. </li>
  9. </ul>
  10. <spanclass="close">CLOSE</span>
<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

Html代码 复制代码
  1. <style>
  2. ul,li,h3,div{margin:0;padding:0;font-size:12px;}
  3. div.comparison{display:none;z-index:3;position:absolute;width:800px;border:2pxdashed#333;background-color:#fff;padding:10px;}
  4. ul{list-style-type:none;clear:both;overflow:hidden;height:120px;}
  5. li.left{float:left;width:395px;}
  6. li.right{width:395px;float:right;}
  7. h3,span.close{color:green;font-size:16px;}
  8. span.close{float:right;font-weight:bold;cursor:pointer;}
  9. lidiv{word-wrap:break-word;overflow:auto;border:1pxsolid#333;max-height:80px;_height:auto;padding:3px;margin:10px0;}
  10. .wrap{z-index:1;background-color:#000;opacity:0.1;filter:alpha(opacity:10);position:absolute;left:0;top:0;width:100%;}
  11. iframe.ie6Bug{border:0;z-index:2;position:absolute;left:0;top:0;width:100%;background-color:#000;}
  12. </style>
<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

Js代码 复制代码
  1. <scripttype="text/javascript">
  2. $(document).ready(function(){
  3. functionbrowserIe(){
  4. if($.browser.msie&&$.browser.version<7){
  5. $("lidiv").each(function(){
  6. varHeightValue=$(this).height();
  7. if(HeightValue>=80){
  8. $(this).css("height","80");
  9. }
  10. else{
  11. $(this).css("height","auto");
  12. }
  13. });
  14. }
  15. }
  16. functioncloseEvent(){
  17. $("span.close").click(function(){
  18. $(".wrap,div.comparison,iframe.ie6Bug").hide();
  19. $(".field#choose").attr("checked","");
  20. $("select").show();
  21. });
  22. }
  23. $("#choose").bind("click",function(){
  24. $(".comparison").load("popUpBox.html",function(){
  25. varbodyWidth=document.documentElement.clientWidth;
  26. varbodyHeight=Math.max(document.documentElement.clientHeight,document.body.scrollHeight);
  27. if($("#choose").attr("checked")){
  28. if($.browser.msie&&$.browser.version<7){
  29. $("<iframeclass='ie6Bug'></iframe>").appendTo("body");
  30. $("select").hide();
  31. }
  32. $("<divclass='wrap'></div>").appendTo("body");
  33. $(".wrap").width(bodyWidth);
  34. $(".wrap").height(bodyHeight);
  35. $(".ie6Bug").width(parseInt($(".comparison").width())+parseInt($(".comparison").css("padding-left"))+parseInt($(".comparison").css("padding-right")));
  36. $(".ie6Bug").height(parseInt($(".comparison").height())+parseInt($(".comparison").css("padding-top"))+parseInt($(".comparison").css("padding-bottom")));
  37. $("div.comparison,.ie6Bug").css({"left":(bodyWidth-$('div.comparison').width())/2+"px","top":(document.documentElement.clientHeight-$('div.comparison').height())/2+document.documentElement.scrollTop+"px"}).show();
  38. browserIe();
  39. closeEvent();
  40. }
  41. });
  42. });
  43. })
  44. </script>
<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","80"); } 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(){ $(".comparison").load("popUpBox.html",function(){ var bodyWidth = document.documentElement.clientWidth; var bodyHeight = Math.max(document.documentElement.clientHeight,document.body.scrollHeight); if($("#choose").attr("checked")){ if ($.browser.msie && $.browser.version < 7) { $("<iframe class='ie6Bug'></iframe>").appendTo("body"); $("select").hide(); } $("<div class='wrap'></div>").appendTo("body"); $(".wrap").width(bodyWidth); $(".wrap").height(bodyHeight); $(".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;
var bodyHeight = Math.max(document.documentElement.clientHeight,document.body.scrollHeight);

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

document.body.scrollHeight指页面body里内容的高度。

当浏览器里y方向不出现滚动轴时 var bodyHeight = document.documentElement.clientHeight;

当浏览器里y方向出现滚动轴时 var bodyHeight = document.body.scrollHeight;

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

Js代码 复制代码
  1. 网页可见区域宽:document.body.clientWidth;
  2. 网页可见区域高:document.body.clientHeight;
  3. 网页可见区域高:document.body.offsetWeight//包括边线的宽
  4. 网页可见区域高:document.body.offsetHeight//包括边线的宽
  5. 网页正文全文宽:document.body.scrollWidth
  6. 网页正文全文高:document.body.scrollHeight
  7. 网页被卷去的高:document.body.scrollTop
  8. 网页被卷去的左:document.body.scrollLeft
  9. 网页正文部分上:window.screenTop
  10. 网页正文部分左:window.screenLeft
  11. 屏幕分辨率的高:window.screen.height
  12. 屏幕分辨率的宽:window.screen.width
  13. 屏幕可用工作区高度:window.screen.availHeight
  14. <spanstyle="color:rgb(0,0,0);">屏幕可用工作区宽度:window.screen.availWidth</span>
网页可见区域宽: 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.availHeight 屏幕可用工作区宽度: window.screen.availWidth

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

Js代码 复制代码
  1. $("div.comparison,.ie6Bug").css({"left":(bodyWidth-$('div.comparison').width())/2+"px","top":(document.documentElement.clientHeight-$('div.comparison').height())/2+document.documentElement.scrollTop+"px"}).show();
$("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动态取文本框的高度来设定最大高度

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值