Bootstrap modal on hiding adds padding-right to html body

Question

I am hiding and showing modal in this sequence:

when I click on import button it will target modal with id=\"import-actionpopup\" then I have two other

Answer 1

Use css only: if you are using single modal (not using multiple modals, I means not using modal over another modal)

.modal-open{
    overflow: auto;
    padding-right:0 !important;
}

Use css and jquery script both: if you are using multiple modals, I means using modal over another modal). Note: add jquery script after jquery file

.modal-open{
        overflow: auto;
        padding-right:0 !important;
    }


$(document).on('show.bs.modal', '.modal', function () {
     $("body").css("padding-right","0");
});

$(document).on('hide.bs.modal', '.modal', function () {
     $("body").css("padding-right","0");
});

Answer 2

This worked for me:

body {
  padding-right:0 !important;
}

.modal-open {
  overflow:auto;
  padding-right:0 !important;
}