Як я можу змінити ширину за замовчуванням модального вікна Twitter Bootstrap?


373

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

   <div class="modal hide fade modal-admin" id="testModal" style="display: none;">
        <div class="modal-header">
          <a data-dismiss="modal" class="close">×</a>
          <h3 id='dialog-heading'></h3>
        </div>
        <div class="modal-body">
            <div id="dialog-data"></div>
        </div>
        <div class="modal-footer">
          <a data-dismiss="modal" class="btn" >Close</a>
          <a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
        </div>
    </div>

І цей Javascript:

    $('.modal-admin').css('width', '750px');
    $('.modal-admin').css('margin', '100px auto 100px auto');
    $('.modal-admin').modal('show')

Результат - це не те, чого я очікував. Модальний верхній зліва розташований у центрі екрана.

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


Плагін завантажувальної програми не має такої кількості варіантів. спробуйте знайти клас у файлі CSS для завантаження і побачити, чи він встановлений через CSS, тоді ви повинні мати змогу перезаписати або, принаймні, мати кращу підказку про те, який це елемент.
GillesC

3
Подивіться на відповідь Ніка Н для дуже приємної чуйної відповіді! stackoverflow.com/a/16090509/539484
OnTheFly

Відповіді:


373

ОНОВЛЕННЯ:

У bootstrap 3вас потрібно змінити модальний діалог. Тож у цьому випадку ви можете додати клас modal-adminу тому місці, де modal-dialogстоїть.

Оригінальний відповідь (Bootstrap <3)

Чи є певна причина, що ви намагаєтесь змінити це за допомогою JS / jQuery?

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

body .modal {
    /* new custom width */
    width: 560px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -280px;
}

У вашому випадку:

body .modal-admin {
    /* new custom width */
    width: 750px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -375px;
}

Причина, по якій я ставлю тіло перед селектором, полягає в тому, що він має більш високий пріоритет, ніж типовий. Таким чином ви можете додати його до користувальницького CSS-файлу та без побоювань оновити Bootstrap.


2
Прокрутіть нижче для кращої (чуйної) відповіді завдяки @NickN!
OnTheFly

1
@FloatingRock ви можете зробити це чуйним, подивіться на мою відповідь
Nick N.

1
@NickN. Вбивця! Дякую Ніку
FloatingRock

47
Bootstrap 3 полегшує це. .modal .modal-dialog { width: 800px; }Ліва позиція обчислюється автоматично.
Гевін

1
Насправді це для мене не працює. Рішення, подане в коментарі від @ZimSystem, зробило свою справу.
tonjo

270

Якщо ви хочете зробити його чутливим лише за допомогою CSS, скористайтеся цим:

.modal.large {
    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}

Примітка 1: Я використовував .largeклас, ви також могли це робити нормально.modal

Примітка 2: У Bootstrap 3 негативна маржа ліворуч більше не потрібна (не підтверджується особисто)

/*Bootstrap 3*/
.modal.large {
     width: 80%;
}

Примітка 3: У Bootstrap 3 і 4 є modal-lgклас. Тож цього може бути достатньо, але якщо ви хочете зробити його чуйним, вам все одно потрібний виправлення, яке я надав для Bootstrap 3.

У деяких додатках використовуються fixedмодалі, у цьому випадку ви можете спробувати width:80%; left:10%;(формула: зліва = 100 - ширина / 2)


Це, мабуть, призводить до того, що модаль буде наполовину від екрану на дуже вузьких екранах.
cofiem

5
Cofiem, використовуйте медіа-запит, щоб виправити це
Nick N.

1
@NickN. мій медіа-запит не виправив. Чи можете ви додати приклад? Нехтування, я це зрозумів. Я мав max-width замість min-width. @media (min-width: 400px) { body .modal-lrg{ width: 80%; /* respsonsive width */ margin-left:-40%; /* width/2) */ } }
HPWD

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

@ Алекс Я думаю, що це дає вам більше контролю, як би ви це зробили з існуючими стовпцями?
Нік Н.

107

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

Дивіться цей JSFiddle для експерименту з різною шириною.

HTML

<div class="modal fade">
    <div class="modal-dialog custom-class">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-header-text">Text</h3>
            </div>
            <div class="modal-body">
                This is some text.
            </div>
            <div class="modal-footer">
                This is some text.
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

CSS

@media screen and (min-width: 768px) {
    .custom-class {
        width: 70%; /* either % (e.g. 60%) or px (400px) */
    }
}

3
правильний для bootstrap3. працює без адаптації запасу! thx
SQueek

1
Я видалив атрибут id у відповіді, оскільки це не потрібно.
arcdegree

це працює, але не реагує на відповіді млуное чи Дейва.
ksiomelo

80

Якщо ви хочете щось, що не порушує відносний дизайн, спробуйте:

body .modal {
  width: 90%; /* desired relative width */
  left: 5%; /* (100%-width)/2 */
  /* place center */
  margin-left:auto;
  margin-right:auto; 
}

Як зазначає @Marco Johannesen, "тіло" перед селектором є таким, що воно займає більш високий пріоритет, ніж за замовчуванням.


4
я рекомендую просто використовувати margin-left:auto; margin-right:auto;замість autoвсього іншого
cwd

в деяких випадках може знадобитися top: 30%відсоток залежно від вмісту всередині.
bool.dev

6
Це добре працює для мене, коли я опускаю правило .modal.fade.in, яке пересуває модаль до кінця в Bootstrap V2.2.2.
ramiro

1
Це працювало з модальним прикладом ANGULAR-UI ... Просто киньте код у файл css і завантажте на сторінку ... angular-ui.github.io/bootstrap/#/modal ... Приклад роботи на plnkr.co / edit / GYmc9s? p = попередній перегляд
Marcello de Sales

1
чудово це рішення добре працює на завантажувальній версії 2.3.2 та ОСНОВНО в Internet Explorer 8,9,10 !!!! рішення з краєм ліворуч: -40% невірно в Internet Explorer !!!
Cioxideru

41

У Bootstrap 3+ найбільш підходящим способом зміни розміру модального діалогового вікна є використання властивості size. Нижче наведено приклад, зверніть увагу modal-smна modal-dialogклас, який вказує на невеликий модальний спосіб. Він може містити значення smдля малого, mdсереднього та lgвеликого.

<div class="modal fade" id="ww_vergeten" tabindex="-1" role="dialog" aria-labelledby="modal_title" aria-hidden="true">
  <div class="modal-dialog modal-sm"> <!-- property to determine size -->
    <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="modal_title">Some modal</h4>
      </div>
      <div class="modal-body">

        <!-- modal content -->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="some_button" data-loading-text="Loading...">Send</button>
      </div>
    </div>
  </div>
</div>

Додав його до моєї відповіді :)
Тум

3
Чи не повинно це бути головною відповіддю? Я вважаю, що головна відповідь може допомогти вам налаштувати її, але більшість випадків використання повинні задовольнятися вбудованими класами Bootstrap.
WebSpanner

Я використовую Bootstrap 3.x, і у мене, здається, немає modal-mdкласу.
James Poulose

34

Для Bootstrap 3 ось як це зробити.

Додайте modal-wideстиль до своєї розмітки HTML (як адаптовано з прикладу в Bootstrap 3 документи )

<div class="modal fade modal-wide" 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 id="myModalLabel" class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </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 -->

і додайте наступний CSS

.modal-wide .modal-dialog {
  width: 80%; /* or whatever you wish */
}

Там немає необхідності перевизначати margin-leftв , Bootstrap 3щоб отримати це , щоб бути в центрі в даний час.


3
Просто, щоб уникнути плутанини, немає технічних причин додавати modal-wideклас, тобто це не внутрішній клас Bootstrap. Можна просто зробити#myModal .modal-dialog { width: 80%; }
Гавін

1
Так. Але робити це як стиль робить його більш корисним для використання.
Дейв Саг

2
Так, я розумію. Просто різницю між класом завантаження та користувацьким класом важко розрізнити, тому я хотів це зазначити.
Гевін

20

У Bootstrap 3 все, що вам потрібно, це це

<style>
    .modal .modal-dialog { width: 80%; }
</style>

Більшість з вищезазначених відповідей для мене не спрацювали !!!


Чи знаєте ви, як змінити модальну висоту? Дякую за вашу відповідь, це працює як принадність :)
FrenkyB

17

Рішення було взято з цієї сторінки

$('#feedback-modal').modal({
    backdrop: true,
    keyboard: true
}).css({
    width: 'auto',
    'margin-left': function () {
        return -($(this).width() / 2);
    }
});

15

У v3 Bootstrap є простий метод зробити модальний більший. Просто додайте клас modal-lg поруч із діалогом modal-lg .

<!-- My Modal Popup -->
<div id="MyWidePopup" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg"> <---------------------RIGHT HERE!!
        <!-- Modal content-->
        <div class="modal-content">

Чому голосування "за" ?! Це абсолютно, і чисто, дало мені гарне широке діалогове вікно! І використовує лише "належні" класи завантаження!
Дейв

Спробуйте відключити деякі елементи HTML - використовуйте найпростішу структуру, яку ви можете перевірити.
Дейв

13

Bootstrap 3: Щоб зберегти чуйні функції для маленьких та надто малих пристроїв, я зробив наступне:

@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}

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

7

Це я і зробив, у своєму custom.css я додав ці рядки, і це все.

.modal-lg {
    width: 600px!important;
    margin: 0 auto;
}

Очевидно, ви можете змінити розмір ширини.


7

Якщо Bootstrap> 3, просто додайте стиль до модалу.

<div class="modal-dialog" style="width:80%;">
  <div class="modal-content">
  </div>
</div>

6

Я знайшов це рішення, яке працює для мене краще. Ви можете скористатися цим:

$('.modal').css({
  'width': function () { 
    return ($(document).width() * .9) + 'px';  
  },
  'margin-left': function () { 
    return -($(this).width() / 2); 
  }
});

або це залежно від ваших вимог:

$('.modal').css({
  width: 'auto',
  'margin-left': function () {
     return -($(this).width() / 2);
  }
});

Дивіться публікацію, де я виявив, що: https://github.com/twitter/bootstrap/isissue/675


5

FYI Bootstrap 3 автоматично обробляє ліву властивість. Тому просто додавання цього CSS змінить ширину та збереже його в центрі:

.modal .modal-dialog { width: 800px; }

Працювали для B3! Дуже дякую!
Багата

4

Збережіть чуйну конструкцію, встановіть ширину відповідно до бажаного.

.modal-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 360px;
}

Не ускладнювати.


4

Змінюючи клас, model-dialogви можете досягти очікуваного результату. Ці маленькі хитрощі працюють на мене. Сподіваюся, це допоможе вам вирішити це питання.

.modal-dialog {
    width: 70%;
}

3

З Bootstrap 3 все, що потрібно, - це відсоткове значення, яке надається модальному діалогу через CSS

CSS

#alertModal .modal-dialog{
     width: 20%;
}

1
Так, бритва окама переходить до цього. перевірено на 3.0 працює чудово
Gui de Guinetik

3

Я використовував комбінацію CSS та jQuery, а також підказки на цій сторінці, щоб створити ширину та висоту рідини за допомогою Bootstrap 3.

По-перше, деякі CSS для обробки ширини та додаткової смуги прокрутки для області вмісту

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

А потім деякі jQuery, щоб відрегулювати висоту області вмісту, якщо потрібно

$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});

Повна реєстрація та код на веб-сайті http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/


3

У Bootstrap 3 з CSS ви можете просто використовувати:

body .modal-dialog {
    /* percentage of page width */
    width: 40%;
}

Це гарантує, що ви не порушите дизайн сторінки, тому що ми використовуємо .modal-dialogзамість цього .modalбуде застосовано навіть до затінення.


2

Спробуйте щось подібне (див. Приклад jsfiddle в прямому ефірі тут: http://jsfiddle.net/periklis/hEThw/1/ )

<a class="btn" onclick = "$('#myModal').modal('show');$('#myModal').css('width', '100px').css('margin-left','auto').css('margin-right','auto');" ref="#myModal" >Launch Modal</a>
<div class="modal" id="myModal" style = "display:none">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

2

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


Щоб зробити модальний адаптивний / розмір будь-якої кількості стовпців:

1) Додайте додатковий роздільник навколо ділового діалогового вікна з класом .container -

<div class="container">
    <div class="modal-dialog">
    </div>
</div>


2) Додайте трохи CSS, щоб зробити модальну повну ширину -

.modal-dialog {
    width: 100% }


3) Або додайте до додаткового класу, якщо у вас є інші модалі -

<div class="container">
    <div class="modal-dialog modal-responsive">
    </div>
</div>

.modal-responsive.modal-dialog {
    width: 100% }


4) Додайте в рядок / стовпці, якщо ви хочете, щоб різні розміри -

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="modal-dialog modal-responsive">
       ...
      </div>
    </div>
  </div>
</div>

2

Додайте наступне у свій файл css

.popover{
         width:auto !important; 
         max-width:445px !important; 
         min-width:200px !important;
       }

2

Використовувати нижче сценарію:

.modal {
  --widthOfModal: 98%;
  width: var(--widthOfModal) !important;
  margin-left: calc(calc(var(--widthOfModal) / 2) * (-1)) !important;
  height: 92%;

  overflow-y: scroll;
}

Демонстрація :

Демо на gif



1

Досягнутий очікуваний результат із використанням,

.modal-dialog {
    width: 41% !important;
}

1

Запуск 3.xx

   <!-- Modal -->
<div class="modal fade" id="employeeBasicDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm employeeModal" role="document">

        <form>

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
            </div>

            <div class="modal-body row">
                Modal Body...
            </div>

            <div class="modal-footer"> 
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

        </form>

    </div>
</div>

Зауважте, що я додав .employeeModal клас у другий розділ. Тоді стиль цього класу.

.employeeModal{
        width: 700px;
    }

скріншот фрагмента коду


0

Я використовував цей спосіб, і це ідеально підходить для мене

$("#my-modal")
.modal("toggle")
.css({'width': '80%', 'margin-left':'auto', 'margin-right':'auto', 'left':'10%'});

0

Менш засноване рішення (без js) для Bootstrap 2:

.modal-width(@modalWidth) {
    width: @modalWidth;
    margin-left: -@modalWidth/2;

    @media (max-width: @modalWidth) {
        position: fixed;
        top:   20px;
        left:  20px;
        right: 20px;
        width: auto;
        margin: 0;
        &.fade  { top: -100px; }
        &.fade.in { top: 20px; }
    }
}

Тоді, де ви хочете вказати модальну ширину:

#myModal {
    .modal-width(700px);
}


0
you can use any prefix or postfix name for modal. but you need to make sure that's should use everywhere with same prefix/postfix name.    

body .modal-nk {
        /* new custom width */
        width: 560px;
        /* must be half of the width, minus scrollbar on the left (30px) */
        margin-left: -280px;
    }

або

body .nk-modal {
            /* new custom width */
            width: 560px;
            /* must be half of the width, minus scrollbar on the left (30px) */
            margin-left: -280px;
        }
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.