将jQuery Mobile弹出窗口定位在可见区域

时间:2018-01-12 14:49:40

标签: css jquery-mobile popup widget positioning

我正在开发一款仅适用于基于Cordova和jQuery Mobile(1.4.5)的平板电脑(Android,iPad)的工具。在这个工具的第一阶段,许多必须使用它的用户要求对表单弹出窗口的行为更加安慰。

问题是:

当一个用户来到一个部分时,我为他提供了一个可折叠集,由子部分组成。在此子部分中,用户使用每个数据集旁边的“添加”,“编辑”和“删除”按钮获取数据网格。 因此,当用户点击“编辑”按钮(或“添加”)时,我打开了一个弹出窗口,其中包含必要的表单和表单元素,以编辑此数据集或向数据库添加新数据。但是在许多即将推出的弹出式窗口中,窗体元素的数量一样高,因此弹出窗口看起来比模式弹出窗口后面的可折叠集(包括数据网格)更高甚至更高。

jQuery Mobile的弹出窗口默认居中,即使我positionTo origin并将x和y坐标传递给它,库/小部件想要通过中心点将弹出窗口定位到此坐标,而不是左上角。 用户总是需要滚动才能到达表单的起始点,在提交表单后,他们必须再次向上滚动到他们点击按钮的位置以打开弹出窗口。

现在我尝试做了我能想到的一切,当点击任何编辑或添加按钮时,将弹出窗口顶部位置强制平板电脑上可见区域顶部位置下方20个像素,无论我在哪里。 我正在玩offset()(window.pageYOffset)等,并通过以下方式设置弹出窗口的位置:

popup2open.popup('open').css({'top':popupTopValue+'px','left':popupLeftValue+'px'});

事实上,如果顶部偏移量介于0和100之间,弹出窗口就会定位到我想要的位置。在100以上的所有值上,弹出窗口的顶部位置会增加绝对难以理解的值。唯一一致的事实是,在点击按钮之前我向下滚动的次数越多,此值增加的越多 - 因此它不会随机减少/减少。

(顺便说一句:我发现我必须将“popupLeftValue”设置为0,因此弹出窗口水平位于中心。)

我无法看到增值的任何规律......

任何人都能给我一个正确方向的暗示或冲击吗?

提前谢谢!

PS:我也使用.css({'position':'[fixed|absolute]','top':popupTopValue+'px','left':popupLeftValue+'px'});进行了实验,效果很好。只找到一个show-stopper:如果我将焦点设置为表单内的输入字段而不是关闭平板电脑上的虚拟键盘,则触发重新定位事件,然后弹出窗口重新定位在下方前一个位置(实际上大约在300像素以下,并且只是边缘化到视觉区域的右边界)。取消和保存按钮甚至在可滚动区域之外。

(一些更有趣的事实,顺便说一句:如果我将焦点设置到相同的输入字段,而不是关闭虚拟键盘,而是直接将焦点设置为选择元素,然后按下平板电脑的后退按钮为了逃避选择菜单,没有触发重新定位事件...!?)

2013年7月18日,加布里埃尔·舒尔霍夫(Gabriel Schulhof)将这一行添加到一位用户的功能请求中,该用户要求确切地询问我正在努力解决的问题:

"We are indeed considering adding such a feature..."

0 个答案:

没有答案