发表新帖
发表新帖

Bootstrap modal: background jumps to top on toggle

后端 未结
关注
30 3117
栀梦
栀梦 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:17

    I had the same problem and I think I figure it out. You just need to place the modal HTML as a direct child of the body tag! You can place the HTML code for the button triggering the modal wherever you need though. I believe this avoids CSS inheritance and position issues that trigger this problem.

    Example:

    <body>
    <!-- All your other HTML code -->
    <div>
        <!-- Button trigger modal -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
</body>
    0 讨论(0)
  • 夕颜
    2020-11-29 20:18

    Try this it works perfectly

    /* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}
    0 讨论(0)
  • 鱼传尺愫
    2020-11-29 20:19

    I tried to set .modal top at the center of the screen. 

    .modal {
    position: absolute;
    top: 50%;
}

    Just my 2cents of thoughts.

    0 讨论(0)
  • 一生所求
    2020-11-29 20:19

    Try using this to open modal and see what happens:

    <a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>
    0 讨论(0)
  • 青春惊慌失措
    2020-11-29 20:19

    body.modal-open { position: inherit; }

    This worked like a charm for me.

    0 讨论(0)
  • 别那么骄傲
    2020-11-29 20:23

    This one did it for me

    body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
    0 讨论(0)
 看不清?
提交回复
热议问题