弹框中动态加载下拉框,下拉框的定位问题

时间:2021-11-22 20:31:55

1、在项目中遇到页面出现有滚动条的弹框,弹框中有下拉框,下拉框的内容太多,需要对下拉框长度限制,于是就变成了有滚动条的弹框中出现了有滚动条的下拉框,但是即使对下拉框添加了滚动条,处于最下面的下拉框还是会出现在弹框里面,不能弹在弹框外面直观的显示。这里面涉及到两个方面的内容。

   一、如何让弹框弹出来。
   二、 如何让弹出来的弹框在滚动条滚动的时候随着滚动条变化而不是固定在某个点。
第一个问题:
让弹框弹出来就是要给弹框一个固定的位置,这里面涉及到布局的位置的相关知识。详细查看position的相关属性。
为了让弹框弹出来,就让弹框的位置为fixed。
第二个问题:让弹出来的弹框的位置相对于点击的父元素不变(相对于自己的select框不变),当滚动条滚动的时候,弹框消失,滚动结束后点击弹框,弹框出现,弹框的位置属性距离的计算为: top=$(this)[0].getBoundingClientRect().top;
getBoundingClientRect()不会计算外部滚动条的位置,所以出现的位置相对正确。
getBoundingClientRect()
  这个方法返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。
var box=document.getElementById('box');         // 获取元素
alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离
2、在外部滚动条滚动的时候,如何让弹框收起的问题。
$('外部滚动条区域').bind('mousewheel', function() {
      $('下拉框').hide();
      $('下拉框').removeClass('显示属性');
             });
3、点击其他区域的时候,下拉框收起。
   $(document).click(function (e) {
     if (!$(e.target).is(".dummy") && !$(e.target).is(".options")) {
      $(".options").removeClass("show");
      $(".options").hide();

                                                   }
                          });