Bootstrap 3 模式在打开时创建滚动条 [英] Bootstrap 3 modal creates scrollbar when opened

问题描述

我第一次尝试使用 Bootstrap，但遇到了模态对话框的问题.使用

<小时>

仅供参考:

show.bs.modal:当调用 show 实例方法时立即触发此事件.如果由点击引起，被点击的元素可作为事件的 relatedTarget 属性.

hidden.bs.modal:当模态完成对用户隐藏时触发此事件(将等待 CSS 转换完成)​​.

参考

I'm trying to use Bootstrap for the first time and am having an issue with modal dialogs. Using the example code on this page, when the modal is opened a scrollbar appears, which also shifts the content on the page to the left.

Code:

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- 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" aria-hidden="true">&times;</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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JSFIDDLE: http://jsfiddle.net/WqRBP/

A lot of sites I'm looking at use Bootstrap and they don't have this issue, so is there some sort of easy fix for the problem?

EDIT: The scrollbar appears in Chrome and IE, I haven't tested in other browsers.

Here's what I'm seeing in JSFIDDLE:

解决方案

The problem occurred because Twitter Bootstrap always shift the page 15px to the left when a modal is opened. You can solve this by moving the page back to the right - margin-right: -15px. This can be done by using events show.bs.modal and hidden.bs.modal provided by Bootstrap's modal.

$('#myModal').bind('hidden.bs.modal', function () {
  $("html").css("margin-right", "0px");
});
$('#myModal').bind('show.bs.modal', function () {
  $("html").css("margin-right", "-15px");
});

jsFiddle

---

FYI:

show.bs.modal: This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

Reference

这篇关于Bootstrap 3 模式在打开时创建滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！