我们在页面弹窗中，总会需要一些弹窗能够跟随DOM的位置出现，叫做“跟随弹窗”。而跟随弹窗最好的要求就是要能根据dom元素所在的位置自动调整跟随dom的方位，以便让弹框完整的显示在可视区中。由于这个实现需要比较麻烦的算法，我们通常的写法就是根据直接让弹窗的左上角对齐dom元素的左下角或者左上角。这样写出的弹窗适应性比较差。
今天我们就来讲解一下让弹窗能自动调节跟随方位的算法问题。
下面空间不足的时候，跟随弹窗自动显示在dom的上方。
上下空间都不足的时候，让跟随弹框显示在空间较大的方向，并且通过overflow:auto来调出滚动条展现内容
正常情况下下方空间足够大时跟随弹窗显示的位置。
左右宽度不够的的时候出现横向滚动条。
跟随弹窗宽度大于dom元素宽度并且页面空间足够时，扩大弹窗的宽度。
我们要能让我们的跟随弹窗达到上面这几种自适应，那就是一个完美的跟随弹窗了。我们都用过My97date这个日历插件，它其实就有这种功能。那么我们下面来说一下这种弹窗定位的实现逻辑。
- 小巧流水人家
- 天边云卷云舒
- 这下厉害了
- 夕阳无限好，只是近黄昏
- 百里平川
- 我们的春天
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
