How can I prevent body scrollbar and shifting when twitter bootstrap modal dialog is loaded?

Question

When I open the twitter bootstrap modal dialog, the backdrop causes a scrollbar and shift the content.

To avoid the scrollbar I use this css:

.modal         


        

Answer 1

Try this

body.modal-open {
overflow: auto;
}

Answer 2

body {
    /*prevent modal background jumping*/
    padding-right:0px !important;
    margin-right:0px !important;
}

/*prevent modal background jumping*/
body.modal-open {
    overflow: auto;
}

Answer 3

For me only the combination of two answers worked.

css:

body {
    padding-right:0px !important;
    margin-right:0px !important;
}

body.modal-open {
    overflow: auto;
}

stylus:

body
  padding-right:0px !important
  margin-right:0px !important
  &.modal-open
    overflow: auto

Answer 4

Mine is easy there it is (CSS Only):

body {
padding-right:0px !important;
margin-right:0px !important;
}

The fact is the !important is overlapping bootstrap from changing padding and margin with the modal-open class and styles.

Answer 5

You should try this. this is working fine.

$j(document).ready(function() {
    $('.modal').on('show.bs.modal', function () {
      if ($(document).height() <= $(window).height()) {
        $('body').css('margin-right','0','!important');
      }
      else { 
       $('body').removeAttr('style');
      }
    })
    $('.modal').on('hide.bs.modal', function () {
        $('body').removeAttr('style');
    })
  })