使用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

1. ShowRegionCheckBoxList = function () {  
2.       var offset = $("# RegionTextList").offset();   //  计算文本框的偏移量       
3.   
4.      $("#RegionCheckBoxListPanel" ).offset({ top: offset.top, left: offset.left });//设置弹出框的偏移量  
5.      $("#RegionCheckBoxListPanel").show();//显示弹出框  
6.       }  

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

   于是修正偏移量代码如下    

[javascript]  view plain  copy

1. ShowRegionCheckBoxList = function () {  
2.   
3.       var offset = $("# RegionTextList").offset();   //  计算文本框的偏移量  
4.      $("#RegionCheckBoxListPanel" ).css("left", "0px");//新加的代码，把偏移量设置为0  
5.      $("#RegionCheckBoxListPanel" ).css("top", "0px");    //  新加的代码，把偏移量设置为0  
6.   
7.      $("#RegionCheckBoxListPanel" ).offset({ top: offset.top, left: offset.left });//设置弹出框的偏移量  
8.      $("#RegionCheckBoxListPanel").show();//显示弹出框  
9.     }  

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

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

[javascript]  view plain  copy

1. ShowRegionCheckBoxList = function () {  
2.     var isShow = $("#" + obj.RegionCheckBoxListPanel).css("display");  
3.         if (isShow == "none") {//已经显示时，不在处理，否则多次点击文本框位置有偏差  
4.   
5.          var offset = $("# RegionTextList").offset();   //  计算文本框的偏移量  
6.   
7.        var location = getScroll();//新加的代码，计算滚动条的位置  
8.         $("#RegionCheckBoxListPanel" ).css("left", "0px");//  
9.         $("#RegionCheckBoxListPanel" ).css("top", "0px");    //   
10.   
11.         $("#RegionCheckBoxListPanel" ).offset({ top: offset.top+ location.top, left: offset.left++ location.left });  
12.   
13.            //重新设置弹出框的偏移量，根据文本框的位置和滚动条的位置  
14.         $("#RegionCheckBoxListPanel").show();//显示弹出框  
15.   
16.   
17.         }    
18.   
19.          }  
20.   
21.        getScroll = function () {//计算滚动条的位置  
22.         var t, l;  
23.         if (document.documentElement && document.documentElement.scrollTop) {  
24.             t = document.documentElement.scrollTop;  
25.             l = document.documentElement.scrollLeft;  
26.         } else if (document.body) {  
27.             t = document.body.scrollTop;  
28.             l = document.body.scrollLeft;  
29.         }  
30.         else {  
31.             t = 0; l = 0;  
32.         }  
33.         return { top: t, left: l };  
34.     }  

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

  3代码共用   

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

[javascript]  view plain  copy

1. function RegionListJS(regionTextList, regionCheckBoxListPanel）{  
2.   
3.    this.RegionTextList = regionTextList;//根据传进来的参数初始ID  
4.   
5.    this.RegionCheckBoxListPanel = regionCheckBoxListPanel;根据传进来的参数初始ID  
6.   
7.   $("#"+ this.RegionTextList).click(function () { RegionShowCheckBoxList(this); });//绑定click事件，并传递参数  
8.   
9.   function RegionShowCheckBoxList(obj) {  
10.    var isShow = $("#" + obj.RegionCheckBoxListPanel).css("display");  
11.           if (isShow == "none") {//已经显示时，不在处理，否则多次点击文本框位置有偏差     
12.   
13.    var offset =    $("#"+obj.RegionTextList ).offset(); //根据传递的参数计算位置  
14.     var location = getScroll();  
15.     $("#"+obj.RegionCheckBoxListPanel ).css("left", "10px");//根据传递的参数计算  
16.     $("#"+obj.RegionCheckBoxListPanel ).css("top", "10px");根据传递的参数计算  
17.     $("#"+obj.RegionCheckBoxListPanel ).offset({ top: offset.top + location.top + 30, left: offset.left + location.left });  
18.     $("#"+obj.RegionCheckBoxListPanel ).show();//根据传递的参数计算  
19.    }}  
20.   
21.   }  

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

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

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

[javascript]  view plain  copy

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

现在可以共享代码了

   测试如下

[javascript]  view plain  copy

1. var test = new RegionListJS("RegionTextList", "RegionCheckBoxListPanel");  
2. ar test1 = new RegionListJS("PRegionTextList", "PRegionCheckBoxListPanel");