jquery写的弹出层

最新推荐文章于 2024-10-30 19:10:39 发布

iteye_11002

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量286

点赞数

文章标签： javascript ViewUI

index.html

Html代码

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

<ul>
<liclass="left">
<h3>޸描述</h3><div>wwwwwwwwwwwwwwwwwwwwwwww1wwwwwwwwwwwwwwwwwww5wwwwwwwwwwwwwwwwwwwwww4wwwwwwwwwwwwwwwwwww1wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww1wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww3wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww2wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>
</li>
<liclass="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>
<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代码

<style>
ul,li,h3,div{margin:0;padding:0;font-size:12px;}
div.comparison{display:none;z-index:3;position:absolute;width:800px;border:2pxdashed#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;}
lidiv{word-wrap:break-word;overflow:auto;border:1pxsolid#333;max-height:80px;_height:auto;padding:3px;margin:10px0;}
.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代码

<scripttype="text/javascript">
$(document).ready(function(){
functionbrowserIe(){
if($.browser.msie&&$.browser.version<7){
$("lidiv").each(function(){
varHeightValue=$(this).height();
if(HeightValue>=80){
$(this).css("height","80");
}
else{
$(this).css("height","auto");
}
});
}
}
functioncloseEvent(){
$("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(){
varbodyWidth=document.documentElement.clientWidth;
varbodyHeight=Math.max(document.documentElement.clientHeight,document.body.scrollHeight);
if($("#choose").attr("checked")){
if($.browser.msie&&$.browser.version<7){
$("<iframeclass='ie6Bug'></iframe>").appendTo("body");
$("select").hide();
}
$("<divclass='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代码

网页可见区域宽：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
<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代码

$("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动态取文本框的高度来设定最大高度