it-swarm.com.ru

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

У меня проблема с модалом. У меня есть кнопка на странице, которая переключает модальные. Когда модал появляется, страница переходит наверх.

Я сделал все, что мог, чтобы найти решение/и т.д., но я действительно потерян.

Правка:

Я также пытался с: $('#myModal').modal('show');, но это точно такой же эффект.

91
FooBar

Когда модальное открывается, классу modal-open присваивается тег <body>. Этот класс устанавливает overflow: hidden; для тела. Добавьте это правило в таблицу стилей, чтобы переопределить стиль bootstrap.css:

body.modal-open {
    overflow: visible;
}

Теперь свиток должен остаться на месте.

153
pstenstrm

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

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
24
Gokhan
$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

Это поможет вам остановить полосу прокрутки, идущую на вершине. Это сработало для меня 

9
Georgi Mirchev

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

5
Nimesh Jain

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

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

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

4
Dennis Heiden

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

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

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

              <div class="inner onlySides">

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

4
billyJoe

Я попытался воспроизвести эту проблему на моем локальном хосте, и, как это ни странно, конфликтует с файлом 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.

3
I Can Has Kittenz

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

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

Просто мои 2цента мыслей. 

3
Holger Thiebosch

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

Пожалуйста, удалите эти 2 дополнительных элемента и дайте нам знать, как это работает. Я удалил лишние divs и удалил все пользовательские скрипты. сохранил только ядро ​​jquery и загрузчик в нижнем колонтитуле. Вот скриншот окончательного вывода. здесь это JSBIN площадка для вас, которая работает нормально. 

Я предлагаю вам использовать headjs для загрузки всех скриптов и файлов CSS. также не рекомендуется дважды загружать любые скрипты. 

enter image description here

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

Мне нужен важный атрибут, чтобы исправить это

2
Dizzle

В начальной загрузке 3.1.1 я решил с этим решением:

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

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

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

body.modal-open { position: inherit; }

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

0
Nimish goel

У меня была такая же проблема, и я думаю, что я понял это. Вам просто нужно поместить модальный 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>
0
nunoarruda

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

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

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

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

Хитрость была в том, чтобы вернуть ложь

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

и JS:

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

Наконец-то понял это . НЕ оборачивайте кнопку, нацеленную на модальное поле, в тег привязки.

Плохой

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

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

.modal-open {

            padding-right: 0 !important;

        }

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

0
Stnfordly

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

0
AlexioVay

У меня работает, когда я изменил версию с 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>
0
Pyot

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

0
Anar Ali

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

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

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
0
Borzilo Andrey

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

Например:

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

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

0
Nathan Beach