Bootstrap 3 modal создает полосу прокрутки при открытии

Я пытаюсь использовать Bootstrap в первый раз, и у меня проблема с модальными диалогами. Используя примерный код на на этой странице, когда модаль открыт, появляется полоса прокрутки, которая также перемещает содержимое на странице влево.

код:

<!-- 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/

Множество сайтов, на которых я смотрю, использует Bootstrap, и у них нет этой проблемы, так есть ли какое-то легкое решение проблемы?

EDIT: Полоса прокрутки отображается в Chrome и IE, я не тестировал ее в других браузерах.

Вот что я вижу в JSFIDDLE:

enter image description here

enter image description here

Ответы

Ответ 1

Проблема возникла из-за того, что Twitter Bootstrap всегда сдвигает страницу 15px влево, когда модаль открывается. Вы можете решить эту проблему, переместив страницу назад вправо - margin-right: -15px. Это можно сделать, используя события show.bs.modal и hidden.bs.modal, предоставленные Bootstrap 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: Это событие срабатывает сразу же после вызова метода show instance. Если вызвано щелчком, элемент clicked доступен как свойство relatedTarget события.

hidden.bs.modal: это событие запускается, когда модальное завершение скрывается от пользователя (будет ждать завершения CSS-переходов).

Ссылка

Ответ 2

Ответ LVarayut отправил меня в правильном направлении, и я использовал это:

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    margin-right: 0;
}

.modal {
    overflow-y: auto;
}

Ответ 3

Это мое решение:

.modal {
 margin-right: -15px;
}`

и добавьте это также

body.modal-open {
    margin-right: 0 !important;
}

Надеюсь, что это поможет вам.

Ответ 4

Это так просто, просто добавьте в свой css:

body.modal-open{overflow:hidden!important;}

/*Optional:*/
.modal-open, .modal{padding-right:0!important}

Ответ 5

Это мое решение

#myModal{
    overflow:hidden;
}
body {
    overflow-y: scroll !important;
}

При этом вы заставите свою страницу иметь полосу прокрутки.

Ответ 6

Этот issue разрешен в Bootstrap версии 3.2.0, который был выпущен 23/06/2014.

Благодаря @roadsunknown для ссылки (в комментариях к вопросу).

Ответ 7

Эта работа для меня. Он должен работать нормально

body.modal-open { 
  padding-right: 0 !important;
  overflow-y: scroll;
}

Ответ 8

Попробуйте выполнить следующую css:

.modal{
    overflow:auto;
}

Я уже решил свою проблему таким образом.

Ответ 9

это сделало трюк для меня

$('html').bind('hidden.bs.modal', function () {
   console.log('hidden');
   $("html").css("margin-right", "0px");
});

$('html').bind('hide.bs.modal', function () {
   console.log('hiding');
   $("html").css("margin-right", "-15px");
});

$('html').bind('show.bs.modal', function () {
   console.log('shown');
   $("html").css("margin-right", "-15px");
});

Ответ 10

В этом случае вы можете перезаписать bootstrap main css, используя собственную причину css, когда-то может повлиять на другую. так что это простой код, который работает

body.modal-open .modal {
    margin-right: -15px !important;
}

body.modal-open {
    margin-right: 0 !important;
}

если вы хотите изменить основную загрузку css, а затем обновите это

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    margin-right: 0 !important;
}