Bootstrap WebView 中的模态位置 UI

Bootstrap modal position in WebView UI

使用 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; 被忽略了 - 因为它是相对于 window 的,所以如果它向下滚动,模态将随页面一起上升。

对此的测试很棘手,为了正确测试,您需要在 WebView 容器中的 应用程序 中进行测试(正如我提到的,在 Chrome 响应在移动设备上,此问题不存在)。

.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

检查以下样式是否覆盖了其他一些样式,

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

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

希望对你有用。

将其放入 html javascript 标签中。

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

我想 post 更新并关闭此问题,并为将来遇到此问题的任何人提供更新。 事实证明,应用程序中存在错误,"pull to refresh" 模块干扰了弹出窗口的位置。一旦这个问题得到解决,模式就会根据 bootstrap 现有代码在正确的位置打开。

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