Bootstrap модальный: фон переходит на верх при переключении

Если вы вызываете modal с тегом. Попробуйте удалить '#' из атрибута href. И вызвать модальный атрибут данных.

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

$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

Это поможет вам остановить полосу прокрутки вверху. Она работала для меня

если вы используете тег привязки, поскольку <a href"#"..>... </a> и href="#" создает проблему, удалите ее. Вы можете прочитать больше здесь

Возможно, работает с модалами, вложенными где-то в код:

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

Для меня это была комбинация положения, высоты и переполнения.

Я не вижу конкретной ошибки, но я бы посоветовал вам проверить ваш синтаксис html.

Крошечный тест с вашим источником дает мне такие ошибки, как

Строка 127, Столбец 34: Разблокированный элемент div.

              <div class="inner onlySides">

Это может быть проблемой.

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

Мне нужен важный атрибут для его исправления.

В bootstrap 3.1.1 я решил с помощью этого решения:

body.modal-open {
    position: absolute !important;
}

Я попытался установить .modal top в центре экрана.

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

Просто мои мысли.

Я попытался воспроизвести эту проблему на моем локальном хосте и, как ни странно, как бы это ни казалось, существует конфликт с файлом Bootstrap JS, который вы используете.

Попробуйте комментировать код:

<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script>    

И вместо этого используйте Bootstrap 2.3.2:

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

Это заставило его работать на меня.

Я попробовал его с Bootstrap версии 3, но это не сработало. Я все еще не в состоянии определить проблему, но где-то рядом с Firebug мне пришла ошибка e.preventDefault() is not a function - я предполагаю, что это должно быть основной причиной, но мне еще предстоит сравнить ее с другими JS файлами.

Попробуйте использовать это, чтобы открыть modal и посмотреть, что произойдет:

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>

у вас есть 2 дополнительных закрывающих тега div непосредственно перед <div id="footer"> или после <div id="mainFrame" class="group"> div. Я использую visual studio 2012 express, чтобы проверить это.

Удалите эти два дополнительных div и сообщите нам, как это работает. Я удалил дополнительные div и удалил все пользовательские скрипты. на нижнем колонтитуле сохраняется только ядро ​​jquery и бутстрап. вот скриншот окончательного вывода. здесь - игровая площадка jsbin для вас, которая отлично работает.

Я предлагаю вам использовать headjs, чтобы загрузить все скрипты и файлы css. Кроме того, это не является хорошей практикой при загрузке любых скриптов в два раза.

У меня та же проблема, и ни один из ответов не помог мне. Нашел обходной путь, который выглядит глупо, но это работает, по крайней мере, в моем случае.

Я обнаружил, что страница прокручивается до вершины только один раз, и после этого следующие открытые модалы работают как положено. Тогда я обнаружил, что скрытие любого элемента в DOM инициирует ту же странную прокрутку. Так что я просто создал фиктивный div после загрузки страницы, а затем скрыл и удалил его, и это решило проблему.

var $temp = $("<div>");
$(".container").append($temp);
$temp.hide().remove();

Для Bootstrap v4 решение было,

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

высота: 100% это решить проблему, но вы должны добавить правильный "div"

Я перепробовал все приведенные выше примеры - это единственное, что сработало для меня:

.modal-open {

            padding-right: 0 !important;

        }

Снятие обивки с правой стороны модели - предотвращает прыжок.

Я потратил часы на это, пробуя все здесь и в других местах. Оказалось, что для использования angularjs-материала мне пришлось отключить анимацию в объекте конфигурации uibModal.open arg.

Например:

  $uibModal.open(
    {
      animation: false,
      component: 'myDialogComponent',
      size: 'lg',
      resolve: {
        details: function() {
          return detailsCollection;
        }
      }
    }
  );

Надеюсь, это поможет кому-то еще.

body.modal-open { position: inherit; }

Это сработало как обаяние для меня.

Для меня работает, когда я изменил версию от 3.1.1 до 3.3.7

Если вам не нужно использовать версию 3.3.1, попробуйте заменить.

После изменения хорошо проверить, что остальная часть функции работает правильно.

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

После чтения десятков ответов в течение нескольких часов я снова скопировал исходный код из файла начальной загрузки и отлаживал шаг за шагом, чтобы узнать, что вызвало то, что я всегда прыгаю вверх. Поскольку фактическая последняя версия Bootstrap 3 показывает модальность в позиции, на которой вы сейчас находитесь. Я обнаружил, что -webkit-transform: translate3d(0,0,0); и height: 100% в моем теге body body теги вызвали это поведение. Возможно, это помогает кому-то.

Это сделало это для меня

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

Bad

<a href"#">
    <button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>

Хорошо

<button type="button" class="btn"
    data-toggle="modal" data-target="#myModal">See Detail</button>

У меня была такая же проблема, и я думаю, что понимаю. Вам просто нужно поместить модальный HTML в качестве прямого дочернего элемента тега body! Вы можете поместить код HTML для кнопки, запускающей модальный, где бы вы ни нуждались. Я считаю, что это позволяет избежать наследования CSS и проблем с положением, которые вызывают эту проблему.

Пример:

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

У меня была такая же проблема с использованием Bootstrap 2.3.2

Это была проблема при нажатии на ссылку:

Уловкой было: return false;

<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
     <i class="icon-map-marker"></i>
</a>

и js:

function openModal() {
    $('#myModal').modal('show');
}

это хорошая идея, чтобы исправить это, это похоже на Джок!

достаточно, добавил один из двух CSS-кодов в вашем стиле

.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

Если ответ pstenstrm не работает для вас, попробуйте комбинировать его с этой кнопкой замены HTML:

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>

Это должно содержать кнопку на экране.

Попробуйте это отлично работает

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}