Bootbox.js is scrolling the window up

Question

I don't have much code to show here, I'm using bootbox.js (http://bootboxjs.com/) for alerts, and every time an alert is popping up the page scrolls to the top. Any ideas how to prevent it? I'm removing items from a long list and would like the page to stay where it is.

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

As for HTML I've tried both -

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

and

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

and a few other ways, it scrolls up anyway.

Thanks!

Answer 1

Initiating the bootbox from <a href="#" class="close alarmDelete">&times;</a> is what causes your page to scroll to the top.

Try initiating it from an icon or div; something other than an empty anchor.

Your other option is to return false; from your click handler.

Answer 2

Possible 2 answers for that. href="#" possibly sending you to top so try changing it with href="javascript:;". It can be also about css. As it is changing the overflow of the body to hidden, it may be cropping your page below the window size so you think it is scrolling you up.

Try adding this to css:

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

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

.modal-open{
    overflow:auto;
}

Answer 3

请试试这个，

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

Answer 4

I had the same issue. As mentioned in another answer on this page, Bootbox is changing the overflow of the body to hidden, making the page small so that it cannot be scrolled.

This css solved it for me:

body.modal-open {
    overflow: visible;
}

Answer 5

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

change the bootbox class position to fixed and modal-open to overflow visible this will fix the popup to the centre of the screen. this will prevent the window from jumping and in my opinion gives a better result. I know this is an old post but I came across this while trying to fix the same issue and some one may find this handy

Answer 6

Can easily be resolved by changing the tag from 'a' to 'button'

<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>