WebView UI 中 Bootstrap 模态框的位置

Question

使用Bootstrap 4.3.1

在我的网站上，模态框正常工作，响应式模式也没有问题。我还有一个Android应用程序，其中包含了WebView中的我的网站和其他功能。当在应用程序中的WebView中触发模态框时，它会在页面顶部打开（不在垂直居中位置），如果您恰好滚动了页面一半，您将看不到它，因为其位置固定在顶部，现在需要向上滚动才能看到它（如果您知道它打开了）。再次强调，在移动页面中不存在此问题，仅存在于WebView中。是否有人遇到过这个问题？

这是Bootstrap模态框的位置。

.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响应式移动端上没有这个问题）。

- kneidels

---

你有没有偶然尝试在你的样式表中设置.modal{ position: fixed !important }？ - Vega

@Vega - 是的，我试过了。在Chrome中，远程设备检查器确实显示为position: fixed，但实际上，在应用程序中的设备本身上，我滚动了页面的一半（https://www.dormi.co.il/users/test222.html），模态弹出窗口卡住了，位于页面顶部，超出了我无法看到的屏幕上方。请参见此处的图像：https://imgur.com/a/rsYq1QH - kneidels

@Vega 再次感谢您的尝试。正如您可能在 imgur 图片中看到的那样，position: fixed 确实被应用了（而且没有被覆盖）。但它似乎是相对于 webview 容器而不是应用程序容器（设备屏幕）的。这意味着当您滚动时它会消失。这澄清了问题吗？ - kneidels

你尝试过在模态框打开时使页面主体不可滚动吗？ - Vega

@Vega - 这是Bootstrap的默认功能，请参见https://getbootstrap.com/docs/4.3/components/modal/#vertically-centered。问题不在于此，而在于模态框的位置，它相对于Web视图容器（可能被隐藏）而不是实际屏幕。 - kneidels

Answer 1

我想发布一个更新并通过更新关闭这个问题，以便将来遇到此问题的人可以参考。原来应用程序中存在一个错误，"下拉刷新"模块干扰了弹出窗口的位置。一旦修复了这个问题，模态框就会根据现有的Bootstrap代码在正确的位置打开。

感谢所有尝试帮助的人。

- kneidels

---

请您能更详细地解释一下吗？我遇到了相同的问题。 - Cak Bud

@AhmadBudairi - Android构建中出现了一个错误 - 它与引导代码发生了冲突。 - kneidels

Answer 2

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

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

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

- Lasantha

Answer 3

希望它能对你有用。 将其放入HTML JavaScript标签中。

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

- Zia ur Rehman

---

谢谢 - 这是一个有趣的解决方法，但在用户界面方面不太好。如果我有一个弹出模态框是上下文驱动的（与页面的特定部分相关），当页面向上滚动时，我会失去它。 - kneidels

这只是一个例子，您可以像targetemelent一样更改目标div。scrollTop = 0 - Zia ur Rehman

Answer 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

这个触笔演示在我的 Webview 上运行

- molysama

---

谢谢。这段代码不够清晰。另外，你能把它应用到标准的Bootstrap模态框结构中吗？ - kneidels