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

Question

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

默认对话框上下文将“在屏幕中心显示对话框视图”。通过观察，我可以看到这意味着对话框在视口中居中 - 这意味着当您上下滚动时，它会保持在同一位置，在视口中间。

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

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

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

Answer 1

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

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

更好的是为移动设备提供完全独立的用户体验，根据屏幕尺寸量身定制，这绝对是我们想要前进的方向——但今天我想至少让它成为可能现有用户可以平移并查看整个模态对话框，而不是让他们留下完全无法使用的东西，直到我们获得“完整”的移动用户体验。