Durandal模态/对话框上下文，允许在移动设备上滚动 [英] Durandal modal/dialog context that allows scrolling on mobile devices

问题描述

Durandal提供了一个模态对话设施，可在桌面设备，它允许您通过对话框上下文控制对话框的显示。

Durandal provides a modal dialog facility which works great on desktop devices, and it allows you to control the presentation of the dialog via the "dialog context".

默认的对话框上下文将显示对话框视图以屏幕为中心。从观察来看，我可以看到，这意味着在视口中心对话框 - 这意味着，当您向上和向下滚动，它保持在相同的位置，在您的视口中间。

The default dialog context will, among other things, "display your dialog's view centered on the screen." Observationally, I can see that this means centering the dialog in the viewport--which means that as you scroll up and down, it remains in the same location, in the middle of your viewport.

这工作得很好，一个大到足以看到整个对话框的屏幕;但是在移动设备上，特别是在手机上，对话框可能比屏幕大，特别是如果用户放大。当这种情况发生时，用户不可能在对话框周围摇动。

This works fine a screen large enough to see the entire dialog; but on mobile devices, particularly phones, the dialog may be larger than the screen, especially if the user zooms in. When this happens, it is impossible for the user to pan around the dialog.

我想通过使用自定义对话框上下文将对话框放置在视口中心 来改变这种行为，但是将其锚定到页面上的固定位置，所以用户可以四处走动。

I would like to change this behavior by using a custom dialog context that positions the dialog in the center of the viewport initially, but then leaves it anchored to a fixed spot on the page, so the user can pan around.

到目前为止，我一直无法弄清楚如何设置一个自定义对话框，观察正常的Durandal默认值，除了center视口规则。我甚至不是积极的我想要或需要做这个作为一个自定义上下文;可能有一个CSS规则将完成这个？

So far I have been unable to figure out how to setup a custom dialog that observes the regular Durandal defaults, except for the "center in the viewport" rule. I'm not even positive I want or need to do this as a custom context; there may be a CSS rule that will accomplish this? Any help would be greatly appreciated.

推荐答案

如Abhinav Gauniyal和PW Kad（谢谢！）所建议的，CSS解决方案

As suggested by Abhinav Gauniyal and PW Kad (thank you!), a CSS solution turned out to be much simpler than a custom context.

在一些挖掘之后，我发现通过改变 position：fixed 到 .modalHost 中的位置：绝对 c>规则，我能够得到我正在寻找的行为。

After some digging, I found that by changing position: fixed to position: absolute in durandal.css, on the .modalHost rule, I was able to get the behavior I was looking for.

Better是一个完全独立的UX，适用于适合其屏幕尺寸的移动设备，这绝对是我们想要的方向 - 但今天 我想要至少使现有用户可以平移，看到整个模态对话框，而不是让它们完全不可用的东西，直到我们已经有一个完整的移动UX到位。

Better would be a completely separate UX for mobile devices that was tailored to their screen size, and that's definitely the direction we want to head--but today I wanted to at least make it possible for existing users to pan around and see the entire modal dialog, instead of leaving them with something completely unusable until we've got a "complete" mobile UX in place.

这篇关于Durandal模态/对话框上下文，允许在移动设备上滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！