Bootstrap模态:背景在切换时跳到顶部

Question

我有一个问题,有一个模态.我在页面上有一个按钮,可以切换模态.当模态显示时,页面跳转到顶部.

我已尽我所能找到解决方案/等,但我真的迷路了.

编辑:

我也尝试过:$('#myModal').modal('show');但它有完全相同的效果.

Answer 1

当模态打开时,modal-open类被设置为<body>标记.这个类设置overflow: hidden;为正文.将此规则添加到样式表以覆盖bootstrap.css样式:

body.modal-open {
    overflow: visible;
}

现在卷轴应保持原位.

Answer 2

如果你用标签调用模态.尝试从href属性中删除"#".并使用数据属性调用模态.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

如果您不使用"<button>"但<a>,就像我的情况一样,当您在对象上移动鼠标光标时,会丢失图标"手指按钮".为了解决这个问题,我已经这样做了:... href ="#mai_modal_id"data-toggle ="modal"......我没有使用数据目标 (5认同)
@pagurix - 您的评论最适合我的方案. (3认同)

Answer 3

$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

这将帮助您停止顶部的滚动条.它对我有用

Answer 4

如果您使用锚标记<a href"#" ..> ... </a>并且href="#"正在创建问题,请将其删除.你可以在这里阅读更多内容

Answer 5

可能使用嵌套在代码中某处的模态：

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

对我来说，它是位置、高度和溢出的组合。

Answer 6

我没有看到具体的错误，但我建议您检查您的 html 语法。

对你的来源进行的一个小测试给了我这样的错误

第 127 行，第 34 列：未闭合的元素 div。
              <div class="inner onlySides">
Run Code Online (Sandbox Code Playgroud)

这可能是一个问题。

Answer 7

在 bootstrap 3.1.1 中我用这个解决方案解决了：

body.modal-open {
    position: absolute !important;
}