Исправлено положение заголовка в bootstrap 3 модальных

Ответ 1

Вместо того, чтобы попытаться сделать заголовок исправленным, просто исправьте высоту тела и сделайте его прокручиваемым. Таким образом, заголовок (и нижний колонтитул) всегда будет виден.

Вы можете легко сделать это, используя CSS3 vh unit вместе с calc. Оба vh как calc имеют довольно хороший браузер поддержка (IE9 +).

Единица vh относится к высоте окна просмотра (= браузер). 1 vh составляет 1% от высоты, а 100vh означает 100% высоты просмотра.

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

Установите либо height, либо max-height на calc(100vh - header+footer px).

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

См. jsfiddle

Ответ 2

Вот простой трюк. Позвольте мне предположить, что я должен исправить div с классом "fixedHeader"

Простой способ JQuery:

$('.modal').scroll(function() {
     var a=$('.modal').scrollTop();
     $('.fixedHeader').css('top',a+'px');
});

CSS

.fixedHeader {
    position:fixed;
}

Независимо от того, что я ответил выше, для нормальной загрузки, используя jquery. Но если кто-то использует angular bootstrap для модального, тогда

Angular

$timeout(function() {
    angular.element('.modal').scroll(function() {
        var a = angular.element('.modal').scrollTop();
        angular.element('.fixedHeader').css('top', a + 'px');
    });
}, 10);
/*Put the above in modalinstance controller*/
/*timeout is necessary as you want to run the function after the modal is loaded or sometimes it may be unable to find the class '.modal' */

CSS

.fixedHeader {
    position:fixed;
}

Убедитесь, что в обоих случаях установлена ​​зависимость jquery.

Ответ 3

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

Я пробовал что-то вроде ritz078 answer, но я обнаружил, что при прокрутке он не работал на iOS, так как Safari любит делать что-то по-своему.

Итак, мое решение состояло в том, чтобы дублировать бит кода, который я хотел связать, и поместить этот дублирующий код вне модальности в его собственную скрытую оболочку:

<div class="fixed-header">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
    </div>
</div>

Затем я использовал JS для 1) сделать дубликат кода видимым после того, как я прокручиваю модальный бит, 2) закройте дублированный код всякий раз, когда я выхожу из модального файла, и 3) восстановит функциональность дубликат модальной кнопки закрытия:

$('#myModal').on('scroll', function() {
    var threshold = 60;

    if ($('#myModal').scrollTop() > threshold) {
        $('.fixed-header').addClass('affixed');
    }
    else {
        $('.fixed-header').removeClass('affixed');
    }
});

$('#myModal').on('hide.bs.modal', function (e) {
    $('.fixed-header').removeClass('affixed');
});

$('.fixed-header button').click(function() {
    $('#myModal').modal('hide');
});

Задача здесь - сопоставление модального стиля (в частности, его ширина и поля), но это решение позволяет вам свободно прокручивать модально на iOS, не глядя на фанки, что было моей целью.

JSFiddle (разветвлено из ответ Jasny, чтобы показать, как он отличается в рамках его ответа)

Ответ 4

В соответствии с моим комментарием это было фактически улучшением в Bootstrap 3. Разрешение длинного содержимого и наличие всего модального прокрутки, а не только "контент" модального.

Вы можете переопределить его с чем-то подобным, но это не так приятно.

.modal {
  overflow: hidden;
}

.modal-body {
  height: 300px;
  overflow: auto;
}

Демо

Ответ 5

В javascript добавьте класс в модальный:

windowClass: 'framework-modal'

В css отрегулируйте o modal-body:

.framework-modal .modal-body {
    max-height: 600px;
    overflow: auto;
}

Ответ 6

В содержании тела

CSS

body{
    overflow:hidden;
}