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

     项目要求制作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 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); })

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

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

现在可以共享代码了

   测试如下

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

作者：xuexiaodong2009 发表于2011-6-18 12:15:00 原文链接

阅读：250 评论：0 查看评论