Я попробовал следующее:
<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')
Результат не тот, который я ожидал. Модальный верхний левый расположен в центре экрана.
Может кто-нибудь мне помочь. Кто-нибудь еще это пробовал. Я предполагаю, что это не необычная вещь, чтобы хотеть сделать.
Ответы:
ОБНОВИТЬ:
У
bootstrap 3
вас нужно поменять модальный диалог. Так что в этом случае вы можете добавить классmodal-admin
в том месте, гдеmodal-dialog
стоит.Оригинальный ответ (Bootstrap <3)
Есть ли определенная причина, по которой вы пытаетесь изменить это с помощью JS / jQuery?
Вы можете легко сделать это только с помощью CSS, что означает, что вам не нужно делать стили в документе. В свой собственный CSS-файл вы добавляете:
В твоем случае:
Причина, по которой я помещаю тело перед селектором, заключается в том, что он имеет более высокий приоритет, чем значение по умолчанию. Таким образом, вы можете добавить его в пользовательский файл CSS и без проблем обновить Bootstrap.
источник
.modal .modal-dialog { width: 800px; }
Левая позиция рассчитывается автоматически.Если вы хотите сделать его отзывчивым только с помощью CSS, используйте это:
Примечание 1: я использовал
.large
класс, вы также можете сделать это на обычном.modal
Примечание 2: В Bootstrap 3 отрицательный запас слева больше не требуется (не подтверждено лично)
Примечание 3: В Bootstrap 3 и 4 есть
modal-lg
класс. Так что этого может быть достаточно, но если вы хотите сделать его отзывчивым, вам все равно нужно исправление, которое я предоставил для Bootstrap 3.В некоторых приложениях
fixed
используются модалы, в этом случае вы можете попробоватьwidth:80%; left:10%;
(формула: left = 100 - width / 2)источник
@media (min-width: 400px) { body .modal-lrg{ width: 80%; /* respsonsive width */ margin-left:-40%; /* width/2) */ } }
Если вы используете Bootstrap 3, вам нужно изменить div модального диалога, а не модальный div, как это показано в принятом ответе. Кроме того, чтобы сохранить адаптивную природу Bootstrap 3, важно написать переопределенный CSS с помощью медиазапроса, чтобы модал имел полную ширину на небольших устройствах.
Смотрите этот JSFiddle, чтобы экспериментировать с различной шириной.
HTML
CSS
источник
Если вы хотите что-то, что не нарушает относительный дизайн, попробуйте это:
Как говорит @Marco Johannesen, «тело» перед селектором имеет более высокий приоритет, чем значение по умолчанию.
источник
margin-left:auto; margin-right:auto;
вместоauto
всего наоборотtop: 30%
процент в зависимости от содержимого внутри.В Bootstrap 3+ наиболее подходящим способом изменить размер модального диалога является использование свойства размера. Ниже приведен пример, заметьте
modal-sm
вдольmodal-dialog
класса, указывая небольшой модальный. Может содержать значенияsm
для малого,md
среднего иlg
большого.источник
modal-md
класса.Для
Bootstrap 3
вот как это сделать.Добавьте
modal-wide
стиль в свою HTML-разметку (как адаптировано из примера в документации по Bootstrap 3 )и добавьте следующий CSS
Там нет необходимости переопределять
margin-left
в ,Bootstrap 3
чтобы получить это , чтобы быть в центре в настоящее время.источник
modal-wide
класса, то есть это не «внутренний» класс Bootstrap. Вы можете просто сделать#myModal .modal-dialog { width: 80%; }
В Bootstrap 3 все, что вам нужно, это
Большинство из приведенных выше ответов не работает для меня!
Показать фрагмент кода
источник
Решение было взято с этой страницы
источник
В v3 Bootstrap есть простой способ сделать модал больше. Просто добавьте класс modal-lg рядом с modal-dialog.
источник
Bootstrap 3: чтобы поддерживать адаптивные функции для маленьких и очень маленьких устройств, я сделал следующее:
источник
Это то, что я сделал, в моем файле custom.css я добавил эти строки, и на этом все.
Очевидно, вы можете изменить размер ширины.
источник
Если Bootstrap> 3, просто добавьте стиль вашей модальности.
источник
Я нашел это решение, которое работает лучше для меня. Вы можете использовать это:
или это в зависимости от ваших требований:
Смотрите пост, где я нашел это: https://github.com/twitter/bootstrap/issues/675
источник
FYI Bootstrap 3 обрабатывает свойство left автоматически. Так что простое добавление этого CSS изменит ширину и сохранит ее по центру:
источник
Сохраните адаптивный дизайн, установите ширину по вашему желанию.
Будь проще.
источник
Изменяя класс,
model-dialog
вы можете достичь ожидаемого результата. Эти маленькие хитрости работают на меня. Надеюсь, это поможет вам решить эту проблему.источник
В Bootstrap 3 все, что требуется, это процентное значение, данное модальному диалогу через CSS
CSS
источник
Я использовал комбинацию CSS и jQuery вместе с подсказками на этой странице, чтобы создать плавную ширину и высоту, используя Bootstrap 3.
Во-первых, немного CSS для обработки ширины и дополнительная полоса прокрутки для области содержимого
А затем некоторые jQuery для регулировки высоты области содержимого, если это необходимо
Полное описание и код на http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/
источник
В Bootstrap 3 с CSS вы можете просто использовать:
Это гарантирует, что вы не нарушите дизайн страницы, потому что мы используем
.modal-dialog
вместо.modal
которого будет применяться даже к штриховке.источник
Попробуйте что-то вроде следующего (см. Живой пример jsfiddle здесь: http://jsfiddle.net/periklis/hEThw/1/ )
источник
Вместо того, чтобы использовать проценты, чтобы сделать модальный отзывчивым, я обнаружил, что можно получить больший контроль над использованием столбцов и других отзывчивых элементов, уже встроенных в загрузочную версию.
Чтобы сделать модальный отзывчивым / размер любого количества столбцов:
1) Добавьте дополнительный div вокруг div модального диалога с классом .container -
2) Добавьте немного CSS, чтобы сделать модальную полную ширину -
3) Или добавьте дополнительный класс, если у вас есть другие модалы -
4) Добавьте в строку / столбцы, если вы хотите модальные размеры -
источник
Добавьте следующее в ваш файл CSS
источник
Используйте ниже сценарий:
Демо :
источник
Я решил это для Bootstrap 4.1
Смесь ранее опубликованных решений
источник
Получил ожидаемый результат, используя,
источник
Bootstrap 3.xx
Обратите внимание, что я добавил класс .employeeModal во второй div. Тогда стиль этого класса.
источник
Я использовал этот способ, и это прекрасно для меня работает
источник
Меньше основанное решение (без js) для Bootstrap 2:
Затем везде, где вы хотите указать модальную ширину:
источник
Я использовал SCSS и полностью адаптивный модал:
источник
или
источник