使用JS制作弹出框的几个小问题

项目要求制作JS弹出框，要求很简单，就是点击一个文本框时弹出一个框让用户在此弹出框中选择。

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

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

我的设置如下：

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

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

开始时的代码如下：

[javascript] view
plain copy

ShowRegionCheckBoxList = function () {

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

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

$("#RegionCheckBoxListPanel").show();//显示弹出框

}

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

于是修正偏移量代码如下

[javascript] view
plain copy

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();//显示弹出框

}

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

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

[javascript] view
plain copy

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不一样外，希望代码共用，修改代码如下

[javascript] view
plain copy

function RegionListJS(regionTextList, regionCheckBoxListPanel）{

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

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

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

function RegionShowCheckBoxList(obj) {

var isShow = $("#" + obj.RegionCheckBoxListPanel).css("display");

if (isShow == "none") {//已经显示时，不在处理，否则多次点击文本框位置有偏差

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); })

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

[javascript] view
plain copy

$("#" + this.RegionTextList).bind('click', { obj: this }, function (event) {

ShowRegionCheckBoxList(event.data.obj);//注意获取传递参数的方式

})

现在可以共享代码了

测试如下

[javascript] view
plain copy

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

ar test1 = new RegionListJS("PRegionTextList", "PRegionCheckBoxListPanel");