使用JS制作弹出框的几个小问题分享，也请牛人指点

[xuexiaodong2009]

原文地址
http://blog.csdn.net/xuexiaodong2009/archive/2011/06/18/6553292.aspx
项目要求制作JS弹出框，要求很简单，就是点击一个文本框时弹出一个框让用户在此弹出框中选择。

但遇到了几个小问题，相信遇到的朋友一定不少，现列举如下：

1 弹出框的样式 ，有一定的要求，因为默认情况下，不显示，只在需要时显示，所以需要position类型为absolute， 其他的类型可不可以用，我没有试， z-index也应该设置，以避免被其他的标签挡住，导致弹出框只显示一部分。

我的设置如下：

<div id="SRegionCheckBoxListPanel" style="left:127px; position: absolute; top:0px; z-index: 10; display: none;">

2 计算弹出框的位置 ，希望弹出框再点击的文本框旁边，所以位置不能写死，需要计算

开始时的代码如下：

ShowRegionCheckBoxList = function () {
var offset = $("# RegionTextList").offset(); // 计算文本框的偏移量

$("#RegionCheckBoxListPanel" ).offset({ top: offset.top, left: offset.left });//设置弹出框的偏移量
$("#RegionCheckBoxListPanel").show();//显示弹出框
}

这样首次点击位置没有问题，可点击几次后，离文本框的位置原来越远，个人怀疑，是偏移量在不停的累加，导致离文本框的位置原来越远

于是修正偏移量代码如下

ShowRegionCheckBoxList = function () {

var offset = $("# RegionTextList").offset(); // 计算文本框的偏移量
$("#RegionCheckBoxListPanel" ).css("left", "0px");//新加的代码，把偏移量设置为0
$("#RegionCheckBoxListPanel" ).css("top", "0px"); // 新加的代码，把偏移量设置为0

$("#RegionCheckBoxListPanel" ).offset({ top: offset.top, left: offset.left });//设置弹出框的偏移量
$("#RegionCheckBoxListPanel").show();//显示弹出框
}

这样修改以后，不管点击多少次，位置都不变了，看来原来那种方式偏移量确实是在不停的累加

但之后又发现了一个小问题，在某些页面位置计算没有问题，可有些计算出来的偏移很大，整整找了一上午，才发现，那些有偏差的页面有滚动条，怀疑是滚动条在作怪。于是再次修正，代码如下

ShowRegionCheckBoxList = function () {


var isShow = $("#" + obj.RegionCheckBoxListPanel).css("display");
if (isShow == "none") {//已经显示时，不在处理，否则多次点击文本框位置有偏差

var offset = $("# RegionTextList").offset(); // 计算文本框的偏移量

var location = getScroll();//新加的代码，计算滚动条的位置
$("#RegionCheckBoxListPanel" ).css("left", "0px");//
$("#RegionCheckBoxListPanel" ).css("top", "0px"); //

$("#RegionCheckBoxListPanel" ).offset({ top: offset.top+ location.top, left: offset.left++ location.left });//重新设置弹出框的偏移量，根据文本框的位置和滚动条的位置
$("#RegionCheckBoxListPanel").show();//显示弹出框


}

}

getScroll = function () {//计算滚动条的位置
var t, l;
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
} else if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
}
else {
t = 0; l = 0;
}
return { top: t, left: l };
}

这样修改以后不管有没有滚动条，弹出框的位置都没有偏差了，不像原来在有滚动条的时出现很大的偏差。

3代码共用



因为一个页面有好几个类似的东西，除了标签的ID不一样外，希望代码共用，修改代码如下

function RegionListJS(regionTextList, regionCheckBoxListPanel）{

this.RegionTextList = regionTextList;//根据传进来的参数初始ID

this.RegionCheckBoxListPanel = regionCheckBoxListPanel;////根据传进来的参数初始ID

$("#"+ this.RegionTextList).click(function () { RegionShowCheckBoxList(this); });//绑定click事件，并传递参数

function RegionShowCheckBoxList(obj) {
var offset = $("#"+obj.RegionTextList ).offset(); //根据传递的参数计算位置
var location = getScroll();
$("#"+obj.RegionCheckBoxListPanel ).css("left", "10px");//根据传递的参数计算
$("#"+obj.RegionCheckBoxListPanel ).css("top", "10px");根据传递的参数计算
$("#"+obj.RegionCheckBoxListPanel ).offset({ top: offset.top + location.top + 30, left: offset.left + location.left });
$("#"+obj.RegionCheckBoxListPanel ).show();//根据传递的参数计算

}

}

结果发现在RegionShowCheckBoxList中obj.RegionTextList是未定义的，一看才知道如下一行的两个this不是同一个对象

$("#"+ this.RegionTextList).click(function () { RegionShowCheckBoxList(this); })

后来才知道这种绑定方式好像不能传递参数，除了事件源外，找到原因后就简单了，改换另外一种，终于完成了

$("#" + this.RegionTextList).bind('click', { obj: this }, function (event) {
ShowRegionCheckBoxList(event.data.obj);//注意获取传递参数的方式
})

现在可以共享代码了

测试如下

var test = new RegionListJS("RegionTextList", "RegionCheckBoxListPanel");
var test1 = new RegionListJS("PRegionTextList", "PRegionCheckBoxListPanel");


几个问题，我的几个猜测是否正确
1 弹出框的样式 必须是position类型为absolute
2多次点击为什么会有偏移，在有滚动条的情况下，经测试没有滚动条时没有偏移？
3在弹出框显示后，多次点击文本框，显示也会有偏移？
也就是在去掉判断后 if (isShow == "none") ，在有滚动条的情况下多次点击文本框，显示也会有偏移？

[xuexiaodong2009]

ShowRegionCheckBoxList = function () {

var offset = $("# RegionTextList").offset(); // 计算文本框的偏移量

var location = getScroll();//新加的代码，计算滚动条的位置
$("#RegionCheckBoxListPanel" ).css("left", "0px");//
$("#RegionCheckBoxListPanel" ).css("top", "0px"); //

$("#RegionCheckBoxListPanel" ).offset({ top: offset.top+ location.top, left: offset.left++ location.left });//重新设置弹出框的偏移量，根据文本框的位置和滚动条的位置
$("#RegionCheckBoxListPanel").show();//显示弹出框

}
多次调用位置为什么有偏差

[以专业开发人员为伍]

你可以将 RegionTextList 外边放一个 <span />，然后当RegionCheckBoxListPanel动态放入这个span的时候，它的偏移量为0行了，用不着计算。

[xuexiaodong2009]

[Quote=引用 10 楼 sp1234 的回复:]

你可以将 RegionTextList 外边放一个 <span />，然后当RegionCheckBoxListPanel动态放入这个span的时候，它的偏移量为0行了，用不着计算。
[/Quote]可我外部样式是position类型为absolute，不需要计算吗？弹出框位置不固定，不需要计算吗

[xuexiaodong2009]

没牛人啊

[porschev]

关键是看不下去。。。

写弹出框的时候几乎没有。。。

太多可以直接用的了

Jquery BlockUI...实在有兴趣。。。看看人怎么封装的。。。

[快溜]

楼主牛人。

[indusl]

每天回帖即可获得10分可用分！小技巧：教您如何更快获得可用分

[md5e]

不知道LZ是不是想要这样效果呢
http://www.lzslong.com/Item/7032.aspx

[Adechen]

慢慢修改，直到符合要求为止

[子夜__]

boxu

[sumuanuo]

哦 。。。。。。。。。。