发表新帖
发表新帖

Bootstrap 3 modal fires and causes page to shift to the left momentarily / browser scroll bar problems

后端 未结
关注
24 1415
遥遥无期
遥遥无期 2020-12-12 12:08

I am working on a site using Bootstrap 3.1.0.

You\'ll notice when the modal window opens, the browser scroll bar just disappears for a split second, then comes back.

相关标签:
24条回答
  • 情歌与酒
    2020-12-12 13:08

    I had this problem with Bootstrap 4. I have html { overflow-y: scroll; } and I think it is a problem but after add .modal-open[style] { padding-right: 0px !important; } to my local css file, everything work perfect!

    .modal-open[style] { 
    padding-right: 0px !important; 
}

    0 讨论(0)
  • 感动是毒
    2020-12-12 13:11 

    html, body{
    padding-right: 0px !important; 
    position: relative!important;
}

    try this code really it's working

    0 讨论(0)
  • 情话喂你
    2020-12-12 13:11

    My Jquery solution:

    var nb = $('nav.navbar-fixed-top');
$('.modal')
    .on('show.bs.modal', function () {
        nb.width(nb.width());
    })
    .on('hidden.bs.modal', function () {
        nb.width(nb.width('auto'));
    });
    0 讨论(0)
  • 一个人的身影
    2020-12-12 13:13

    Fixing the shifting left issue is easily done using CSS alone.

    .modal-open[style] {
padding-right: 0px !important;
}

    You're just overwriting an inline style that exists in the code. I am using mine in a WordPress build and the inline style was being applied to the body. Looked like this:

    <body class="home blog logged-in modal-open" style="padding-right: 15px;">

    Hope this helps someone!

    0 讨论(0)
  • 盖世英雄少女心
    2020-12-12 13:14 
    $('body').on('show.bs.modal', function () {
    if ($("body").innerHeight() > $(window).height()) {
        $("body").css("margin-right", "17px");
    }
}); 

$('body').on('hidden.bs.modal', function (e) {
    $("body").css("margin-right", "0px");
});

    This little fix simulates the scrollbar when the modal is shown, adding a margin-right to the body.

    0 讨论(0)
  • 醉梦人生
    2020-12-12 13:15

    to solve the problem causing the page to shift to the right

    html, body{
  padding: 0 !important;
}

    0 讨论(0)
 看不清?
提交回复
热议问题