发表新帖
发表新帖

Bootstrap modal: background jumps to top on toggle

后端 未结
关注
30 3118
栀梦
栀梦 2020-11-29 19:48

I have a problem, with a modal. I have a button on a page, that toggles the modal. When the modal shows up, the page jumps to top.

I have done everything I could to

相关标签:
30条回答
  • 粉色の甜心
    2020-11-29 20:24

    For me works when I changed the version from 3.1.1 to 3.3.7

    If you do not have to use version 3.3.1 try replacing.

    After the change, it is good to check that the rest of the function works correctly.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    0 讨论(0)
  • 抹茶落季
    2020-11-29 20:25

    it's good idea for fixed it, it's look like jock!

    just enough, added one of two css code in your style

    .body.modal-open { overflow:visible;padding-right:0px !important;}
    .body.modal-open { height:auto;padding-right:0px !important;}

    https://github.com/jschr/bootstrap-modal/issues/131#issuecomment-153405449

    0 讨论(0)
  • 一整个雨季
    2020-11-29 20:26

    When the modal opens a modal-open class is set to the <body> tag. This class sets overflow: hidden; to the body. Add this rule to your stylesheet to override the bootstrap.css style:

    body.modal-open {
    overflow: visible;
}

    Now the scroll should stay in place.

    0 讨论(0)
  • 星月不相逢
    2020-11-29 20:26

    Possibly working with modals nested somewhere in the code:

    body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

    For me it was a combination of position, height and overflow.

    0 讨论(0)
  • 夕颜
    2020-11-29 20:26

    If you are facing this issue in an Angular program add the below code at the first line of .scss file.

    ::ng-deep {   
     body.modal-open {
          overflow: visible !important;
          position: absolute !important;   
     } 
}
    0 讨论(0)
  • 北海茫月
    2020-11-29 20:26

    After reading dozens answers over several hours I copied the original code from the bootstrap file again and debugged step by step to see what caused that I always jump to the top. Because the actual latest version of Bootstrap 3 is showing the modal at the position you're at right now. I had found out that -webkit-transform: translate3d(0,0,0); and height: 100% in my css body-tag caused this behaviour. Maybe this helps some one.

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