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

原文地址
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") ，在有滚动条的情况下多次点击文本框，显示也会有偏移？

解决方案 »

  1.   


    关键是看不下去写弹出框的时候几乎没有太多可以直接用的了Jquery BlockUI...实在有兴趣看看人怎么封装的
      

  2.   

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

  3.   


    boxu
      

  4.   

    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();//显示弹出框 }   
    多次调用位置为什么有偏差
      

  5.   

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

  6.   

    可我外部样式是position类型为absolute，不需要计算吗？弹出框位置不固定，不需要计算吗