Question

我没有太多代码要显示在这里，我使用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>;

以及其他几种方式，无论如何都会向上滚动。

谢谢！

Answer 1

从<a href="#" class="close alarmDelete">×</a>启动引导程序会导致您的网页滚动到顶部。

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

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

Answer 2

请试试这个，

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

Answer 3

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

尝试将此添加到css：

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

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

.modal-open{
    overflow:auto;
}

Answer 4

我有同样的问题。正如本页的另一个答案所述，Bootbox正在将主体的溢出更改为隐藏，使页面变小，使其无法滚动。

这个css为我解决了这个问题：

body.modal-open {
    overflow: visible;
}

Answer 5

body.modal-open {
    overflow: visible;
}
.bootbox {
  width: 100%;
  height: 100%;
  display: table;
  position: fixed;
}

将bootbox类位置更改为fixed并将modal-open更改为溢出可见，这会将弹出窗口固定到屏幕中心。这样可以防止窗户跳跃，在我看来会产生更好的效果。我知道这是一篇很老的帖子，但是在尝试解决同样的问题时遇到了这个问题，有些人可能会发现这个方便

Answer 6

可以通过将标签从“ 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>

Bootbox.js正在向上滚动窗口

6 个答案: