javascript - 允许在移动设备上滚动的 Durandal 模式/对话框上下文

Question

Durandal 提供了一个 modal dialog facility它在桌面设备上运行良好，它允许您通过“对话框上下文”控制对话框的显示。

默认对话框上下文将“在屏幕中央显示对话框的 View ”。从观察上看，我可以看出这意味着对话框在视口(viewport)中居中——这意味着当您上下滚动时，它会保持在相同的位置，在视口(viewport)的中间。

在大到足以看到整个对话框的屏幕上效果很好；但在移动设备上，尤其是手机上，对话框可能比屏幕大，尤其是当用户放大时。发生这种情况时，用户无法在对话框周围平移。

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

到目前为止，我一直无法弄清楚如何设置一个自定义对话框来观察常规 Durandal 默认值，除了“视口(viewport)中的中心”规则。我什至不确定我想要或需要将其作为自定义上下文来执行；可能有一个 CSS 规则可以完成这个？任何帮助将不胜感激。

Answer 1

正如 Abhinav Gauniyal 和 PW Kad 所建议的(谢谢!)，事实证明，CSS 解决方案比自定义上下文简单得多。

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

更好的做法是针对移动设备的屏幕尺寸量身定制一个完全独立的用户体验，这绝对是我们想要前进的方向——但今天我想至少让它成为可能现有用户可以四处浏览并查看整个模式对话框，而不是让他们看到一些完全无法使用的东西，直到我们拥有一个“完整的”移动用户体验。