Durandal模态/对话框上下文,允许在移动设备上滚动

时间:2014-07-29 14:04:21

标签: javascript css knockout.js durandal durandal-2.0

Durandal提供modal dialog facility,它在桌面设备上运行良好,它允许您通过"对话框上下文来控制对话框的显示。

除其他外,默认对话框上下文将显示以屏幕为中心的对话框视图。"在观察中,我可以看到这意味着将对话框置于视口中心 - 这意味着当您向上和向下滚动时,它会保留在视口中间的相同位置。

这个工作正常,足以看到整个对话框;但是在移动设备上,尤其是手机上,对话框可能比屏幕大,特别是如果用户放大。当发生这种情况时,用户无法在对话框中平移。

我想通过使用自定义对话框上下文来更改此行为,该对话框上下文将对话框放置在视口最初的中心,但随后将其锚定到页面上的固定位置,因此用户可以平移。

到目前为止,我一直无法弄清楚如何设置一个自定义对话框来观察常规Durandal默认值,除了视口中的"中心"规则。我甚至不想肯定我想要或需要这样做作为自定义上下文;可能有一个CSS规则将完成此任务?任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

根据Abhinav Gauniyal和PW Kad(谢谢!)的建议,CSS解决方案比自定义上下文简单得多。

经过一番挖掘后,我发现将position: fixed更改为position: absolute durandal.css.modalHost规则,我能够获得我正在寻找的行为

对于根据屏幕尺寸量身定制的移动设备,最好是一个完全独立的用户体验,这绝对是我们想要的方向 - 但今天我想至少使现有用户可以平移并查看整个模态对话框,而不是让他们完全无法使用,直到我们得到完整的"移动用户体验到位。