2

我这里没有太多代码要展示，我使用 bootbox.js (http://bootboxjs.com/) 来发出警报，每次弹出警报时，页面都会滚动到顶部。任何想法如何防止它？我正在从一长串列表中删除项目，并希望页面保持原位。

bootbox.backdrop(false)
bootbox.confirm("Delete: " + alarmId + "?", function(result){
if(result)
    doStuff
})

至于 HTML，我两种都试过了——

<a href="#" class="close alarmDelete">&times;</a>

和

<a class="close alarmDelete">&times</a>;

还有其他几种方式，它无论如何都会向上滚动。

谢谢！

4

6 回答 6

6

启动引导箱<a href="#" class="close alarmDelete">&times;</a>是导致您的页面滚动到顶部的原因。

尝试从图标或 div 启动它；除了空锚之外的东西。

您的另一个选择是return false;从您的点击处理程序。

于 2013-12-05T04:48:47.937 回答
2

可能的 2 个答案。href="#" 可能会将您发送到顶部，因此请尝试使用 href="javascript:;" 更改它。它也可以是关于 css 的。由于它将正文的溢出更改为隐藏，它可能会将您的页面裁剪到窗口大小以下，因此您认为它正在向上滚动您。

尝试将其添加到 css：

.modal{
    direction:rtl;
    overflow-y: auto;
}

.modal .modal-dialog{
    direction:ltr;
}

.modal-open{
    overflow:auto;
}
于 2014-02-20T22:56:06.000 回答
1

请试试这个，

 bootbox.confirm("Delete: " + alarmId + "?", function(result) {}, {"backdrop": false});
于 2012-09-25T02:11:23.727 回答
1

我遇到过同样的问题。正如本页另一个答案中提到的，Bootbox 正在将 body 的溢出更改为隐藏，使页面变小以至于无法滚动。

这个css为我解决了它：

body.modal-open {
    overflow: visible;
}
于 2014-11-14T18:58:50.290 回答
0 
body.modal-open {
    overflow: visible;
}
.bootbox {
  width: 100%;
  height: 100%;
  display: table;
  position: fixed;
}

将 bootbox 类的位置更改为固定，将模式打开更改为溢出可见，这会将弹出窗口固定到屏幕的中心。这将防止窗口跳跃，我认为会产生更好的结果。我知道这是一篇旧帖子，但我在尝试解决相同问题时遇到了这个问题，有些人可能会觉得这很方便

于 2015-07-16T11:18:34.793 回答
0

可以通过将标签从“a”更改为“按钮”轻松解决

<p>Content here.
    <button type="button" class="show-alert">Alert!</button>
</p>
<script>
    $(document).on("click", ".show-alert", function(e) {
        var dialog = bootbox.dialog({
            title: 'A custom dialog with init',
            message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
        });

        dialog.init(function() {
            setTimeout(function() {
                dialog.find('.bootbox-body').html('I was loaded after the dialog was shown!');
            }, 3000);
        });
    });
</script>
于 2020-02-13T11:24:23.783 回答