WebView UI 中的引导模式位置答案

【问题标题】：Bootstrap modal position in WebView UIWebView UI 中的引导模式位置
【发布时间】：2019-07-14 08:53:58
【问题描述】：

使用 Bootstrap 4.3.1

在我的网站上，模式也可以在响应模式下完美运行。

我还有一个 Android 应用程序，除其他功能外，它还包含我在 WebView 中的网站。当我在应用程序中的 WebView 中触发模式时，在一个长页面上 - 它在页面顶部打开（不是垂直居中），如果你碰巧向下滚动页面一半，你将看不到它，因为位置固定在顶部，您现在需要向上滚动才能看到它（如果您知道它已打开）。

再次，在日志网页中，以移动形式 - 问题不存在 - 仅在 WebView 中。有人遇到过这种情况吗？

这是 Bootstrap 对 modal 的位置。

.modal {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
}

似乎在 WebView 中，position: fixed; 被忽略了——因为它是相对于窗口的，所以如果它向下滚动，模式会随着页面上升。

对此的测试很棘手，要正确测试，您需要在 应用程序 内、WebView 容器内进行测试（正如我所提到的，在移动设备上的 Chrome 响应式中，此问题不存在） .

【问题讨论】：

机会不大，您是否尝试在样式表中设置 .modal{ position: fixed !important }？
@Vega - 是的，试过了。在 Chrome 中，远程设备检查器确实显示为 position: fixed，但实际上，在应用程序中的设备本身上 - 我被滚动到页面的一半（dormi.co.il/users/test222.html）并且模式弹出窗口被卡住，到顶部页面，在我看不到它的上部屏幕之外。在此处查看图片：imgur.com/a/rsYq1QH
@Vega 再次感谢您的尝试。正如您可能在 imgur 图像中看到的那样，position: fixed 确实被应用（而不是被覆盖）。但它似乎是相对于 webview 容器而不是 app 容器（设备屏幕）。这意味着它会在您滚动时消失。这是否澄清了问题？
您是否尝试过在模态打开时使正文不可滚动？
@kneidels 你试过把模态html最后放在body标签里吗？？

标签： android bootstrap-4 android-webview google-chrome-app

【解决方案1】：

检查下面的样式是否被其他样式覆盖，

position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;

看起来像是样式渲染问题，

【讨论】：

【解决方案2】：

我希望它对你有用。

把它放在 html javascript 标签中。

$('#here_put_modal_id').on('shown.bs.modal', function (e) {
   // here are code
   document.documentElement.scrollTop = 0
})

【讨论】：

谢谢 - 这是一个有趣的解决方法，但在 UI 方面很糟糕。如果我有一个上下文驱动的弹出模式（与页面的特定部分相关），当页面向上滚动时我会丢失它。
这只是一个示例，您可以像 targetemelent 一样更改目标 div。 scrollTop = 0

【解决方案3】：

我想发布一个更新并结束这个问题，并为将来遇到此问题的任何人提供更新。原来，应用程序中有一个错误，“拉动刷新”模块干扰了弹出窗口的位置。修复该问题后，模式会根据引导程序现有代码在正确的位置打开。

感谢所有试图提供帮助的人。

【讨论】：

您能详细解释一下吗？我遇到了同样的问题。
@AhmadBudairi - Android 版本中有一个错误 - 它与引导代码冲突

【解决方案4】：

.edit-wrap
    z-index 999
    position fixed
    left 0
    right 0
    top 0
    bottom 0
    overflow hidden
    background rgba(0, 0, 0, 0.6)
    display flex
    .edit-container
        background #d1cdb7
        padding 1em 2em 1em 2em
        margin auto

这个手写笔演示适用于我的网页视图

【讨论】：

谢谢。代码不清楚。另外，你能把它应用到标准的引导模态结构上吗？