Центр модального вертикального положення Bootstrap 3


270

Це питання з двох частин:

  1. Як можна розташувати модаль вертикально в центрі, коли не знаєш точної висоти модала?

  2. Чи можливо мати модальний центр і мати переповнення: автоматично в модальному тілі, але тільки якщо модальний перевищує висоту екрана?

Я спробував використовувати це:

.modal-dialog {
  height: 80% !important;
  padding-top:10%;
}

.modal-content {
  height: 100% !important;
  overflow:visible;
}

.modal-body {
  height: 80%;
  overflow: auto;
}

Це дає мені результат, який мені потрібен, коли вміст значно більший за вертикальний розмір екрана, але для малого модального вмісту він майже непридатний.


1
@Heiken чомусь змушує мене стрибати на екран, я використовую хром
Sven van den Boogaart

Відповіді:


374
.modal {
  text-align: center;
}

@media screen and (min-width: 768px) { 
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

І трохи відрегулюйте клас .fade, щоб переконатися, що він виглядає поза верхньою межею вікна, а не в центрі


Я насправді перекреслив це помилково, дякую, що зазначив, що це насправді працює за кадром.
Доріан

Це, мабуть, найкращий спосіб централізувати вертикально не лише модуль завантаження, а й усе інше. css-tricks.com/centering-in-the-unknown
Марк S

4
Я уточнюю, що це не дуже добре працює на Mobile. Тому що визначення ": after" має висоту 100% і може автоматично переміщувати модальний режим вниз сторінки. Я щойно вирішив оголосити .modal {display: flex! Важливо;} .modal-dialog {margin: auto}. 92,97% людей вже мають підтримку, використовуючи цю властивість CSS, однак для загальної інформації suporte можуть використовувати JavaScript для встановлення поля.
Walter Chapilliquen - wZVanG

21
Абсолютно чудово, але я б рекомендував використовувати його лише вище 768px і залишити налаштування за замовчуванням на мобільному пристрої. Верхня позиція найкраща для модалів, коли висота екрана невелика. Я також налаштував анімацію, щоб вона з’явилася у центрі, ось робочий приклад, якщо комусь це потрібно: codepen.io/anon/pen/zGBpNq
bwitkowicz

Це модальне вікно зсуву вправо на 2 пікселя, причина: перед елементом. Але це можна вирішити, додавши той самий код для: after
Cypher

146

1. Як можна розташувати модаль вертикально в центрі, коли не знаєш точної висоти модала?

Для абсолютного центру Bootstrap 3 Modal, не оголошуючи висоту, спочатку потрібно буде перезаписати CSS Bootstrap, додавши це до таблиці стилів:

.modal-dialog-center { /* Edited classname 10/03/2014 */
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
}

Це дозволить розмістити модальні діалоги у верхньому лівому куті в центрі вікна.

Ми повинні додати цей медіа-запит, інакше модальний край-лівий неправильний на невеликих пристроях:

@media (max-width: 767px) {
  .modal-dialog-center { /* Edited classname 10/03/2014 */
    width: 100%;
  }
} 

Тепер нам потрібно буде скорегувати його положення за допомогою JavaScript. Для цього ми даємо елементу від'ємний верх і лівий край, рівний половині його висоти та ширини. У цьому прикладі ми будемо використовувати jQuery, оскільки він доступний у Bootstrap.

$('.modal').on('shown.bs.modal', function() {
    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return -($(this).outerHeight() / 2);
        },
        'margin-left': function () {
            return -($(this).outerWidth() / 2);
        }
    });
});

Оновлення (01.10.2015):

Додавання відповіді Фініка . Кредити до центрування у невідомому .

.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px; /* Adjusts for spacing */
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

Помічаєте негативну маржу-правильно? Це видаляє простір, доданий вбудованим блоком. Цей простір змушує модаль перейти до нижньої частини сторінки @media width <768px.

2. Чи можна мати модальний центр і мати переповнення: авто в модальному тілі, але тільки якщо модальний перевищує висоту екрана?

Це можливо, надавши модальному тілу переповнення-y: auto та max-висоту. Для коректної роботи потрібно трохи більше роботи. Почніть з додавання цього до таблиці стилів:

.modal-body {
    overflow-y: auto;
}
.modal-footer {
    margin-top: 0;
}

Ми знову використаємо jQuery, щоб отримати висоту вікна та спочатку встановити максимальну висоту модального контенту. Тоді ми повинні встановити максимальну висоту модального тіла, віднімаючи модальний вміст з модальним заголовком і модальним колонтитулом:

$('.modal').on('shown.bs.modal', function() {
    var contentHeight = $(window).height() - 60;
    var headerHeight = $(this).find('.modal-header').outerHeight() || 2;
    var footerHeight = $(this).find('.modal-footer').outerHeight() || 2;

    $(this).find('.modal-content').css({
        'max-height': function () {
            return contentHeight;
        }
    });

    $(this).find('.modal-body').css({
        'max-height': function () {
            return (contentHeight - (headerHeight + footerHeight));
        }
    });

    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return -($(this).outerHeight() / 2);
        },
        'margin-left': function () {
            return -($(this).outerWidth() / 2);
        }
    });
});

Ви можете знайти робочу демонстрацію тут за допомогою Bootstrap 3.0.3: http://cdpn.io/GwvrJ EDIT: Я рекомендую використовувати оновлену версію замість цього для більш чуйного рішення: http://cdpn.io/mKfCc

Оновлення (30.11.2015):

function setModalMaxHeight(element) {
  this.$element     = $(element);  
  this.$content     = this.$element.find('.modal-content');
  var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
  var dialogMargin  = $(window).width() < 768 ? 20 : 60;
  var contentHeight = $(window).height() - (dialogMargin + borderWidth);
  var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
  var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
  var maxHeight     = contentHeight - (headerHeight + footerHeight);

  this.$content.css({
      'overflow': 'hidden'
  });

  this.$element
    .find('.modal-body').css({
      'max-height': maxHeight,
      'overflow-y': 'auto'
  });
}

$('.modal').on('show.bs.modal', function() {
  $(this).show();
  setModalMaxHeight(this);
});

$(window).resize(function() {
  if ($('.modal.in').length != 0) {
    setModalMaxHeight($('.modal.in'));
  }
});

(Оновлено 30.11.2015 http://cdpn.io/mKfCc з вище редагуванням)


1
відмінна відповідь та повідомлення! Однак чи можна це оживити? Він чудово працює, коли він просто спливає, а як бути з анімованими? Я на роботі і не можу перевірити її на атм, але я нетерплячий побачити результати
скутер

Ви можете додати клас fade на модальний. Перегляньте моє оновлене рішення на сайті cdpn.io/mKfCc
dimbslmh

Хоча це здається, що він працює чудово, але я не можу змусити його працювати над моїм проектом. Я думаю, вам просто потрібно додати код, а не замінити щось правильно?
скутер

1
Знову! Помітив наступне. Коли перший модал вперше відкриється, правильне поле неправильне, поки ви не зміните розмір один раз. Будь-які ідеї на цьому?
скутер

1
@bernie Я робив скріншоти на Browserstack з вилкою свого коду, який має короткий модальний доступ до document.ready: browserstack.com/screenshots/… Browserstack не підтримує v9.3.x для скріншотів (поки що), але я думаю щось подібне до того, що ви описали, відбувається в iOS 6.0 (Див. скріншот iPad 3rd (6.0) (Портрет)). Можливо, це стара помилка, яка повернулася в v9.3.2. Якщо ви хочете, ви можете подати звіт про помилку на forums.developer.apple.com/community/safari-and-web/…
dimbslmh

37

Моє рішення

.modal-dialog-center {
    margin-top: 25%;
}

    <div id="waitForm" class="modal">
        <div class="modal-dialog modal-dialog-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 id="headerBlock" class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <span id="bodyBlock"></span>
                    <br/>
                    <p style="text-align: center">
                        <img src="@Url.Content("~/Content/images/progress-loader.gif")" alt="progress"/>
                    </p>   
                </div>
            </div>
        </div>
    </div>

Ви повинні використовувати підкладки-топ. маржа порушить дію закриття при натисканні на накладення
anvd

2
Верхній запас, встановлений на рівні 25%, вимагає, щоб модаль був високим 50%.
заколот

28

Його можна просто виправити display: flex

.modal-dialog {
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal.fade .modal-dialog {
  transform: translate(0, -100%);
}

.modal.in .modal-dialog {
  transform: translate(0, 0);
}

З префіксом

.modal-dialog {
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -100%);
          transform: translate(0, -100%);
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

2
Це запобігає натискання фону через висоту 100 Вт. Це чудово для налаштувань "backdrop: 'static" ".
ianstigator

ця причина зникає з анімацією
Viswanath Lekshmanan

23

Я придумав чисте рішення css! Це хоч css3, що означає, що ie8 або нижче не підтримується, але крім цього він перевірений і працює на ios, android, тобто9 +, chrome, firefox, desktop safari ..

Я використовую наступний css:

.modal-dialog {
  position:absolute;
  top:50% !important;
  transform: translate(0, -50%) !important;
  -ms-transform: translate(0, -50%) !important;
  -webkit-transform: translate(0, -50%) !important;
  margin:auto 5%;
  width:90%;
  height:80%;
}
.modal-content {
  min-height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0; 
}
.modal-body {
  position:absolute;
  top:45px; /** height of header **/
  bottom:45px;  /** height of footer **/
  left:0;
  right:0;
  overflow-y:auto;
}
.modal-footer {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

Ось загадка. http://codepen.io/anon/pen/Hiskj

..вибираючи це як правильну відповідь, оскільки немає зайвого javascript, який підводить браузер на коліна у випадку більш ніж одного способу.


8
Вся суть використання JavaScript полягала в тому, щоб отримати невідому висоту модаля. Ваше рішення має фіксовану висоту 80%, що не відповідає на ваше власне питання: "Як можна розташувати модаль вертикально в центрі, коли ви не знаєте точної висоти модалу ?"
dimbslmh

... розмір висоти встановлений для обмеження максимальної модальної висоти порівняно з висотою екрана. Однак відсоток перекладу встановлюється відповідно до висоти ЗМІСТ.
скутер

3
Якщо ви хочете отримати рішення, яке не змінює розмір модального поля, спробуйте також таке рішення css: tweaks.klickagent.ch/#30.05.2014_TwitterBootstrapCenterModal
klickagent.ch

Дуже добре також. Однак він має інший підхід, ніж той, який я описую. У вашому випадку весь модаль рухається вгору і вниз, коли в моєму випадку створюється перекинутий елемент. Дуже приємно, хоча! Мені це подобається!
скутер

Для цього потрібно встановити висоту. Це не точно так, як просить користувач.
заколот

21

Якщо ви все добре використовуєте flexbox, це допоможе вирішити це.

.modal-dialog {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

.modal-content {
  margin: 0 auto;
}

7
Я знаю, ця відповідь для мене чудово працює. Тим НЕ менше, якщо ви хочете , щоб користувачі могли закрити модальний, натиснувши це фон, не забудьте додати pointer-events: noneв .modal-dialogі pointer-events: autoдо .modal-content. Бекаузу .modal-dialog {height: 100%}охоплює весь стовпчик над і під модалом і забороняє користувачам клацати на тлі на цій ділянці.
wuct

в поєднанні з пропозицією від @ChingTingWu, найефективніша
стридер

А де пропозиція @ChingTingWu?
giovannipds

1
ChingTingWu, схоже, змінився на @wuct
xiaolin

1
@giovannipds На жаль, я перейменував своє ім’я користувача, оскільки це коротше і простіше позначати тегом. Вибачте за заплутаність :)
wuct

20

Моє рішення:

.modal.in .modal-dialog 
{
    -webkit-transform: translate(0, calc(50vh - 50%));
    -ms-transform: translate(0, 50vh) translate(0, -50%);
    -o-transform: translate(0, calc(50vh - 50%));
    transform: translate(0, 50vh) translate(0, -50%);
}

Здається, це ідеально працює з Bootstrap 3. Чому це не прийнята відповідь? Це набагато простіше (4 директиви css), ніж інші.
danielricecodes

@danielricecodes Я збираюся зробити знімок і припускаю, що це пов’язано з проблемами з оглядами одиниць. . Пропонована відповідь Scooterlord запропонувала сумісність навіть з IE9, і iOs, які підказують для мене, викликає занепокоєння. Якщо ви переглянете сторінку проблем canIuse, ви побачите, що є проблеми з iOs та IE10 та старішими. Не те, що я згоден чи ні, що це правильна відповідь. Я просто вказую, чому, можливо, це не було обрано як відповідь.
Малавос

1
Проблема такого підходу полягає в тому, коли модаль має вміст, який прокручується (більше вмісту, ніж вміщається у вікно)
Стівен Прибілінський,

Це має бути прийнятою відповіддю. Поки що це єдине рішення для мене працює. Дякую за це
шифу

Це не спрацює, якщо ваш модальний вміст перевищує висоту екрана (якщо ваш модал повинен прокручувати)
Brett Gregson

18

Все, що я зробив у моєму випадку - це встановити Топ у своєму css, знаючи висоту модалі

<div id="myModal" class="modal fade"> ... </div>

в моєму css я встановив

#myModal{
    height: 400px;
    top: calc(50% - 200px) !important;
}

1
Як ноуб на css, ця відповідь видалася найменш лякаючою і виконала роботу
Одід Бен Дов

2
Це не дає відповіді на першу частину питання: ".. коли ви не знаєте точної висоти модаля?"
natec

15

Додавання цього простого css також працює.

.modal-dialog {
  height: 100vh !important;
  display: flex;
}

.modal-content {
  margin: auto !important;
  height: fit-content !important;
}

Що таке fit-content?
Марк

12

Існує найпростіший спосіб зробити це за допомогою css:

.modal-dialog {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width:500px;
    height:300px;
}

Це воно. Зауважте, що його потрібно застосовувати лише до.modal-dialog контейнера div.

Демо: https://jsfiddle.net/darioferrer/0ueu4dmy/


7
Не реагує на мобільний телефон через фіксовану ширину та висоту.
ianstigator

Ваша відповідь передбачає, що кожен пристрій має однакову роздільну здатність екрана
Patricio Rossi

Жодної людини. Я припускаю, що ви зрозуміли цей приклад і ви здатні адаптувати його до кожного випадку.
Даріо Феррер

У Bootstrap v3.3.0 запустити успішно, Дякую
Амін Гадері

11

Розширюючись на відмінну відповідь @ Finik, це виправлення застосовується лише до немобільних пристроїв. Я протестував в IE8, Chrome і Firefox 22 - він працює з дуже довгим або коротким вмістом.

.modal {
  text-align: center;
}
@media screen and (min-device-width: 768px) {
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

8

Найбільш універсальне рішення, яке я написав. Динамічні обчислення з діалоговою висотою. (Наступним кроком може бути перерахунок висоти діалогів на розмір вікна.)

JSfiddle: http://jsfiddle.net/8Fvg9/3/

// initialise on document ready
jQuery(document).ready(function ($) {
    'use strict';

    // CENTERED MODALS
    // phase one - store every dialog's height
    $('.modal').each(function () {
        var t = $(this),
            d = t.find('.modal-dialog'),
            fadeClass = (t.is('.fade') ? 'fade' : '');
        // render dialog
        t.removeClass('fade')
            .addClass('invisible')
            .css('display', 'block');
        // read and store dialog height
        d.data('height', d.height());
        // hide dialog again
        t.css('display', '')
            .removeClass('invisible')
            .addClass(fadeClass);
    });
    // phase two - set margin-top on every dialog show
    $('.modal').on('show.bs.modal', function () {
        var t = $(this),
            d = t.find('.modal-dialog'),
            dh = d.data('height'),
            w = $(window).width(),
            h = $(window).height();
        // if it is desktop & dialog is lower than viewport
        // (set your own values)
        if (w > 380 && (dh + 60) < h) {
            d.css('margin-top', Math.round(0.96 * (h - dh) / 2));
        } else {
            d.css('margin-top', '');
        }
    });

});

7

Знайдено ідеальне рішення тут

$(function() {
    function reposition() {
        var modal = $(this),
            dialog = modal.find('.modal-dialog');
        modal.css('display', 'block');

        // Dividing by two centers the modal exactly, but dividing by three 
        // or four works better for larger screens.
        dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
    }
    // Reposition when a modal is shown
    $('.modal').on('show.bs.modal', reposition);
    // Reposition when the window is resized
    $(window).on('resize', function() {
        $('.modal:visible').each(reposition);
    });
});

1
Дякую. Ідеально підходить для мене з однією зміною: dialog.css ("margin-top", Math.max (0, ($ (документ) .scrollTop () + (($ (window) .height () - dialog.height ()) / 2))));
В’ячеслав Солдатов

4
$('#myModal').on('shown.bs.modal', function() {
    var initModalHeight = $('#modal-dialog').outerHeight(); //give an id to .mobile-dialog
    var userScreenHeight = $(document).outerHeight();
    if (initModalHeight > userScreenHeight) {
        $('#modal-dialog').css('overflow', 'auto'); //set to overflow if no fit
    } else {
        $('#modal-dialog').css('margin-top', 
        (userScreenHeight / 2) - (initModalHeight/2)); //center it if it does fit
    }
});

З декількома налаштуваннями на селекторах це спрацювало як шарм. @$modal = $('.fade.in'); modalBox = @$modal.find('.modal-content'); initModalHeight = modalBox.outerHeight(); userScreenHeight = @$modal.outerHeight()
juliangonzalez

4

Ось ще один метод css, який працює досить добре і заснований на цьому: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

sass:

.modal {
    height: 100%;

    .modal-dialog {
        top: 50% !important;
        margin-top:0;
        margin-bottom:0;
    }

    //keep proper transitions on fade in
    &.fade .modal-dialog {
        transform: translateY(-100%) !important;
    }
    &.in .modal-dialog {
        transform: translateY(-50%) !important;
    }
}

Як і в інших transformрішеннях, питання виникає, коли модаль має вміст, який можна прокручувати (більше вмісту, ніж вміщається у вікно)
Стівен Прибілінський,

3

я завантажив діалогове вікно bootstrap3 із нижнього посилання та змінив функцію відкриття у bootstrap-dialog.js

https://github.com/nakupanda/bootstrap3-dialog

Код

open: function () {
            !this.isRealized() && this.realize();
            this.updateClosable();
            //Custom To Vertically centering Bootstrap 
            var $mymodal = this.getModal();
            $mymodal = $mymodal.append('<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center" valign="middle" class="centerModal"></td></tr></table>');
            $mymodal = $mymodal.find(".modal-dialog").appendTo($mymodal.find(".centerModal"));
            //END
            this.getModal().modal('show');
            return this;
        }

Css

.centerModal .modal-header{
    text-align:left;
}
.centerModal .modal-body{
    text-align:left;
} 

Ось модифікація, яка може бути застосована у вашому власному коді, не змінюючи оригінальне джерело BSDialog: gist.github.com/mahemoff/8ff6d3782d2da6f9cbb3 (лише деякі зміни до JS, вони також написані в каві, але ви отримаєте ідею).
mahemoff

3

Це працює для мене:

.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

2

Спробуйте щось подібне:

.popup__overlay {
    position: fixed;
    left:  0;
    top:  0;
    width: 100%;
    height: 100%;
    z-index: 999;
    text-align: center
    }
.popup {
    display: inline-block;
    vertical-align: middle
    } 

1
Це могло б працювати досить добре, але у завантажувальних модулів є абсолюти, всередині закріплені, всередині цього і того ...: /
scooterlord

1
Які стосуються ці класи з режимами Bootstrap / Bootstrap?
lofihelsinki


1

Простий спосіб. Працюй для мене. Thks rensdenobel :) http://jsfiddle.net/rensdenobel/sRmLV/13/

<style>
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
}
</style>
<!-- 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="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <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>
</div>    

1

ще одне рішення, яке встановить дійсне положення для кожного видимого модалу window.resizeподії та ввімкнення show.bs.modal:

(function ($) {
    "use strict";
    function centerModal() {
        $(this).css('display', 'block');
        var $dialog  = $(this).find(".modal-dialog"),
            offset       = ($(window).height() - $dialog.height()) / 2,
            bottomMargin = parseInt($dialog.css('marginBottom'), 10);

        // Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
        if(offset < bottomMargin) offset = bottomMargin;
        $dialog.css("margin-top", offset);
    }

    $(document).on('show.bs.modal', '.modal', centerModal);
    $(window).on("resize", function () {
        $('.modal:visible').each(centerModal);

    });
})(jQuery);

1
var modalVerticalCenterClass = ".modal";
function centerModals($element) {
    var $modals;
    if ($element.length) {
        $modals = $element;
    } else {
        $modals = $(modalVerticalCenterClass + ':visible');
    }
    $modals.each( function(i) {
        var $clone = $(this).clone().css('display', 'block').appendTo('body');
        var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
        top = top > 0 ? top : 0;
        $clone.remove();
        $(this).find('.modal-content').css("margin-top", top);
    });
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
    centerModals($(this));
});
$(window).on('resize', centerModals);

1

Я знаю, що трохи пізно, але я додаю нову відповідь, щоб вона не загубилася в натовпі. Це рішення для перехресного настільного мобільного браузера, яке працює скрізь як слід.

Їй просто потрібно modal-dialogзагорнути всередину modal-dialog-wrapкласу і мати наступні доповнення до коду:

.modal-dialog-wrap {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

.modal-dialog {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.modal-content {
  display: inline-block;
  text-align: left;
}

Діалогове вікно починається в центрі, а у випадках з великим вмістом він просто росте вертикально, поки не з’явиться смуга прокрутки.

Ось робоча загадка для вашого задоволення!

https://jsfiddle.net/v6u82mvu/1/


1

Це досить старе і спеціально вимагає рішення за допомогою Bootstrap 3, але для всіх, хто цікавиться: від Bootstrap 4 далі є вбудоване рішення, яке називається .modal-dialog-centered. Ось питання: https://github.com/twbs/bootstrap/isissue/23638

Таким чином , використовуючи v4 вам просто потрібно додати .modal-dialog-centeredв .modal-dialogвертикально центрировать модальність:

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

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

0

Розгляньте можливість використання модульного завантажувача для завантаження - https://github.com/jschr/bootstrap-modal

Плагін буде центром усіх ваших режимів


... на жаль, я спробував це, але не зміг змусити його працювати належним чином - принаймні, не з моїм кодом. Я здогадуюсь, що кожному потрібно це налаштувати під свої потреби! Дякую за відповідь, хоча.
скутер

0

Щодо центрування, я не розумію, що стосується надто складних рішень. завантажувальний центр вже центрує його горизонтально для вас, тому вам не потрібно возитися з цим. Моє рішення просто встановити верхню маржу лише за допомогою jQuery.

$('#myModal').on('loaded.bs.modal', function() {
    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return (($(window).outerHeight() / 2) - ($(this).outerHeight() / 2));
        }
    });
});

Я використовував події load.bs.modal, коли я віддалено завантажую вміст, а використання події показано.ba.modal призводить до неправильного обчислення висоти. Звичайно, ви можете додати в події для зміни розміру вікна, якщо вам потрібно, щоб воно було таким чуйним.


якщо модаль досить великий, це може спричинити проблеми
скутер

0

Дуже простий спосіб досягти цієї концепції, і ви завжди будете отримувати модальний модуль завжди в модді екрана, використовуючи css як fllow: http://jsfiddle.net/jy0zc2jc/1/

Ви повинні просто modalвідобразити клас у вигляді таблиці, дотримуючись css:

display:table

і modal-dialog якdisplay:table-cell

дивіться повний робочий приклад у даній скрипці


Я взагалі не бачу модальності
ThaDafinser

Єдине, що я бачу (в Google Chrome) - це значок із червоним хрестом та фоном
ThaDafinser

Не прокручуйте мітку, коли модаль має більше вмісту, ніж вміщається у вікні
Стівен Прибілінський

0

це не так складно.

будь ласка, спробуйте це:

$(document).ready(function(){
    var modalId = "#myModal";
    resize: function(){
            var new_margin = Math.ceil(($(window).height() - $(modalId).find('.modal-dialog').height()) / 2);
            $(modalId).find('.modal-dialog').css('margin-top', new_margin + 'px');
    }
    $(window).resize(function(){
        resize();
    });
    $(modalId).on('shown.bs.modal', function(){
        resize();
    });
});

0

Скористайтеся цим простим сценарієм, який центрирує модалі.

Якщо ви хочете, ви можете встановити спеціальний клас (наприклад: .modal.modal-vcenter замість .modal), щоб обмежити функціональність лише деякими модами.

var modalVerticalCenterClass = ".modal";

function centerModals($element) {
    var $modals;
    if ($element.length) {
    $modals = $element;
    } else {
    $modals = $(modalVerticalCenterClass + ':visible');
}
$modals.each( function(i) {
    var $clone = $(this).clone().css('display', 'block').appendTo('body');
    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
    top = top > 0 ? top : 0;
    $clone.remove();
    $(this).find('.modal-content').css("margin-top", top);
    });
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
    centerModals($(this));
});
$(window).on('resize', centerModals);

Також додайте це виправлення CSS для горизонтального проміжку модалу; ми показуємо прокрутку на модалі, скрутки тіла автоматично приховані Bootstrap:

/* scroll fixes */
.modal-open .modal {
    padding-left: 0px !important;
    padding-right: 0px !important;
    overflow-y: scroll;
}

0

У мобільній формі рослин це може виглядати трохи інакше, ось мій код.

<div class="modal-container">
  <style>
  .modal-dialog{
    margin-top: 60%;
    width:80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 100%
  }
  @media screen and (orientation:landscape){
    .modal-dialog{
      margin-top: 70;
      width:80%;
      margin-left: 10%;
      margin-right: 10%;
      margin-bottom: 100%
    }
  }
  .modal-body{
    text-align: center;
  }
  .modal-body p{
    margin:14px 0px;
    font-size: 110%;
  }
  .modal-content{
    border-radius: 10px;
  }
  .modal-footer{
    padding:0px;
  }
  .modal-footer a{
    padding: 15px;
  }
  .modal-footer a:nth-child(1){
    border-radius: 0px 0px 0px 10px;
  }
  .modal-footer a:nth-child(2){
    border-radius: 0px 0px 10px 0px;
  }
  </style>
  <h2>Basic Modal Example</h2>
  <div data-toggle="modal" data-target="#myModal">Div for modal</div>
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <p>确定要取消本次订单嘛?</p>
          </div>
          <div class="modal-footer">
            <div class="btn-group btn-group-justified">
              <a href="#" class="btn btn-default" data-dismiss="modal">取消</a>
              <a href="#" class="btn btn-default" data-dismiss="modal">确定</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.