Как я могу изменить ширину по умолчанию модального окна 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')

Результат не тот, который я ожидал. Модальный верхний левый расположен в центре экрана.

Может кто-нибудь мне помочь. Кто-нибудь еще это пробовал. Я предполагаю, что это не необычная вещь, чтобы хотеть сделать.

Nullpo
источник
Плагин Bootstrap не видит столько вариантов. попробуйте найти класс в файле начальной загрузки CSS и посмотреть, установлен ли он с помощью CSS, тогда вы сможете перезаписать или, по крайней мере, лучше понять, какой это элемент.
GillesC
3
Посмотрите на ответ Ника N для очень хорошего адаптивного ответа! 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 вы можете сделать его отзывчивым, посмотрите на мой ответ
Ник Н.
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%;(формула: left = 100 - width / 2)

Ник Н.
источник
Похоже, это приводит к тому, что на очень узких экранах модальное изображение оказывается наполовину за пределами экрана.
Cofiem
5
Cofiem, используйте медиа-запрос, чтобы исправить это
Ник Н.
1
@NickN. мой медиа-запрос не исправил это. Можете ли вы добавить пример? Не обращай внимания, я понял. У меня была максимальная ширина вместо минимальной ширины. @media (min-width: 400px) { body .modal-lrg{ width: 80%; /* respsonsive width */ margin-left:-40%; /* width/2) */ } }
HPWD
Я считаю, что использование% не дает достаточного контроля, как при использовании столбцов, уже встроенных в загрузчик.
Алекс
@ Алекс Я думаю, что это дает вам больше контроля, как бы вы сделали это с существующими столбцами?
Ник Н.
107

Если вы используете Bootstrap 3, вам нужно изменить div модального диалога, а не модальный div, как это показано в принятом ответе. Кроме того, чтобы сохранить адаптивную природу 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) */
    }
}
arcdegree
источник
3
правильный вариант для bootstrap3. работает без учета маржи! ТНХ
Squeek
1
Я удалил атрибут id в ответе, потому что это не обязательно.
arcdegree
это работает, но это не отзывчиво, как mlunoe или Дейв отвечает.
ksiomelo
80

Если вы хотите что-то, что не нарушает относительный дизайн, попробуйте это:

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

Как говорит @Marco Johannesen, «тело» перед селектором имеет более высокий приоритет, чем значение по умолчанию.

mlunoe
источник
4
я рекомендую просто использовать margin-left:auto; margin-right:auto;вместо autoвсего наоборот
cwd
в некоторых случаях может понадобиться top: 30%процент в зависимости от содержимого внутри.
bool.dev
6
Это хорошо работает для меня, когда я опускаю правило .modal.fade.in, которое перемещает модал до самого конца в Bootstrap V2.2.2.
Рамиро
1
Это работало с модальным примером ANGULAR-UI ... Просто поместите код в файл css и загрузите на страницу ... angular-ui.github.io/bootstrap/#/modal ... Запуск примера на plnkr.co / edit / GYmc9s? p = Предварительный просмотр
Марчелло де Сэйлс
1
отлично это решение хорошо работает на 2.3.2 начальной загрузки и MAIN в Internet Explorer 8,9,10 !!!! решение с полем слева: -40% неверно в Internet Explorer !!!
Cioxideru
41

В Bootstrap 3+ наиболее подходящим способом изменить размер модального диалога является использование свойства размера. Ниже приведен пример, заметьте 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класса.
Джеймс Полус
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>

Большинство из приведенных выше ответов не работает для меня!

Alupotha
источник
Вы знаете, как изменить модальную высоту? Спасибо за ваш ответ, он работает как шарм :)
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-dialog.

<!-- 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 */ }
}
user2823201
источник
это правильно. это работает для меня. не забудьте изменить свойство ширины на XX% для адаптивного макета. Кстати, версия в моем случае 3.0.3
Джерри Чен
7

Это то, что я сделал, в моем файле custom.css я добавил эти строки, и на этом все.

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

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

clarenswd
источник
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/issues/675

PedroSaiz
источник
5

FYI Bootstrap 3 обрабатывает свойство left автоматически. Так что простое добавление этого CSS изменит ширину и сохранит ее по центру:

.modal .modal-dialog { width: 800px; }
Gavin
источник
Работал на B3! Большое спасибо!
Багата
4

Сохраните адаптивный дизайн, установите ширину по вашему желанию.

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

Будь проще.

obfk
источник
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которого будет применяться даже к штриховке.

saadel
источник
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>​
Periklis
источник
2

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


Чтобы сделать модальный отзывчивым / размер любого количества столбцов:

1) Добавьте дополнительный div вокруг div модального диалога с классом .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>
Alex
источник
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

Януш Ладецки
источник
2

Я решил это для Bootstrap 4.1

Смесь ранее опубликованных решений

.modal-lg {
  max-width: 90% !important; /* desired relative width */
  margin-left:auto !important;
  margin-right:auto !important;
}

Патрисио Морага
источник
1

Получил ожидаемый результат, используя,

.modal-dialog {
    width: 41% !important;
}
Аамир
источник
1

Bootstrap 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 во второй div. Тогда стиль этого класса.

.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);
}
sinelaw
источник
0

Я использовал SCSS и полностью адаптивный модал:

.modal-dialog.large {
    @media (min-width: $screen-sm-min) { width:500px; }
    @media (min-width: $screen-md-min) { width:700px; }
    @media (min-width: $screen-lg-min) { width:850px; }
} 
Родольфо Хорхе Немер Ногейра
источник
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;
        }
Н. К. Чаудхари
источник