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

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

                                                   }
                          });


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值