javascript - Bootbox.js is scrolling the window up - Stack Overflow

admin管理员组

文章数量:1362177

I don't have much code to show here, I'm using bootbox.js (/) 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!

I don't have much code to show here, I'm using bootbox.js (http://bootboxjs./) 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!

• javascript
• twitter-bootstrap

Share Improve this question Follow edited Sep 25, 2012 at 9:37 Igor R asked Sep 25, 2012 at 1:51 Igor RIgor R 63522 gold badges1010 silver badges2828 bronze badges 3

• where is the html? it might be because you're using this with an anchor tag with href='#' to trigger the alert. – kennypu Commented Sep 25, 2012 at 1:59
• kennypu, added the html, results are always same – Igor R Commented Sep 25, 2012 at 9:40
• Rahul, thanks for the reminder, just did. I'm relatively new to SO )) – Igor R Commented Sep 25, 2012 at 9:43

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 6

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.

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

Please try this,

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

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

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

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>

本文标签： javascriptBootboxjs is scrolling the window upStack Overflow