Как поменять размер модальнго окна в bootstrap 3?

Question

[IvoLO]

Нашел в одном месте, что нужно добавить в CSS код:
#myModal .modal-dialog
{
width: 70%;
}

а в javascript добавить:

$('#openBtn').click(function(){
$('#myModal').modal({show:true})
});

CSS папку нашел, а вот как найти папку с javascript? прошу не пинать я в этом не профи, только разбираюсь.

Answer 1

[Юрий Лобанов]

Если Вы хотите быстрый способ, то поиском найдите в файлах bootstrap.css, bootstrap.min.css ".modal-dialog" и измените значение "600px" на любое другое.
Или, в любом месте напишите:

#myModal.modal-dialog {
width: 500px!important;
}

И не забудьте присвоить id="myModal" тому самому окну, ширину которого хотите изменить.

Answer 2

[Сергей Харчевников]

Платформа Bootstrap 3 и 4 позволяет настраивать размер модального окна. Для этого в этой платформе имеются 2 дополнительных класса: .modal-lg (увеличивает ширину модального окна) и .modal-sm (уменьшает ширину модального окна).

Чтобы изменить размер модального окна один из этих классов необходимо дополнительно поместить рядом с классом .modal-dialog.

<!-- Кнопка, открывающая широкое модальное окно -->
<button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Открыть ширикое модальное окно </button>
<!-- Широкое модальное окно -->
<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <!--...-->
    </div>
  </div>
</div>
     
<!-- Кнопка, открывающая узкое модальное окно -->
<button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">Открыть узкое модальное окно </button>
<!-- Узкое модальное окно -->
<div id="smallModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <!--...-->
    </div>
  </div>
</div>

Answer 3

[IvoLO]

всё, что вы предложили не помогает, уже прописывал

Comments

[Юрий Лобанов]

Простите за грубость, но как по Вашему, у какого варианта больше вероятность: Вы со своими детскими вопросами не сделали то, что Вам предложили, или все предложенные варианты не работают? Я только что проверил - все работает, ищите подключенный к вашему сайту файл css и правьте там значение ширины у класса modal-dialog. Не пишите в начале файла, не пишите в конце файла, а исправьте значение. Поверьте мне, все работает. И это лишь один из множества способов, и все они будут работать. Перечитайте то, что я написал и попробуйте сделать в точности, как я сказал. Ну и надеюсь, что Вы чистите кэш браузера. Надеюсь, когда у Вас все-таки получится - у Вас хватит совести отметить ответы как решение.

[IvoLO]

вы думаете, что я просто так, ради забавы пишу, что варианты который были предложены не помогают? Вот код который прописан в файле bootstrap.css для класса modal-dialog: .modal-dialog { z-index: 1050; width: 600px; (значения ставил всевозможные) padding: 10px; margin-right: auto; margin-left: auto; } То, что этот способ который Вы пишите работает в стандартном скачанном bootstrap 3, я знаю. Поэтому я и обратился за помощью, что просто изменить значение width не помогает.

[Юрий Лобанов]

Давайте сначала, ответьте, пожалуйста на вопросы: 1. В html-файле у Вас подключен именно этот файл? То есть что прописано в теге head? 2. Какие еще css у Вас подключены? 3. Как Вы вызываете модальное окно? 4. Смотрели ли Вы, как я советовал, через средства просмотра кода стили, которые дают ширину модальному окну? 5. Искали ли Вы поиском по файлам css, которые подключены в файле html, класс modal-dialog, этот класс определен только в одном месте? И если не секрет - какой именно нестандартный twitter bootstrap Вы используете и почему?

[IvoLO]

Невнимателен, что тут сказать. Подключен у меня был bootstrap.min,css . А я как дурак несколько часов пилю bootstrap.css безрезультатно и думаю, почему ничего не происходит. Извиняюсь, что парил голову и спасибо, что по пунктам расписали, так бы не проверил.

[Юрий Лобанов]

Рад, что смог помочь.

Answer 4

[Юрий Лобанов]

Вооружитесь инструментом для просмотра кода, они есть в хроме и мозилле по умолчанию, или используйте Firebug для Мозиллы. Откройте модальное окно и посмотрите, откуда то берет свою ширину (и, исходя из вопроса - высоту), измените эти параметры, если хотите изменить ширину глобально. Если только в каком-то отдельном окне - то используйте конструкцию вроде предложенной Вами.
То, что Вы хотите добавить в javascript, никакого отношения к размерам модального окна не имеет, а является одним из способов вызова окна.

Comments

[IvoLO]

код я вижу, использую nootepad++, и спокойно его редактирую. Пробыл уже кучу кодов прописывать в папке bootstrap.css для класса modal, конкретней для modal-dialog и ничего не помогает. Поэтому предположил, что если просто код в css не помогает то нужно прописать и в javascript

[MelPops]

Ссылку на сайт в студию

[MelPops]

Ссылку на сайт в студию

[IvoLO]

я тренируюсь на локалке. Скажите какой код нужен я покажу его?

[Юрий Лобанов]

@IvoLO, в папке прописывали? Первое - у Вас подключен bootstrap.css или bootstrap.min.css? Где Вы прописываете - в начале файла, в отдельном файле или в конце файла? При чем тут менять код, меняйте его хоть в чем, я говорю о просмотре кода, и просмотре того, какие стили за что отвечают.

Answer 5

[IvoLO]

код ещё раз чтобы лучше смотрелось:

.modal-dialog {
  z-index: 1050;
  width: 600px;
  padding: 10px;
  margin-right: auto;
  margin-left: auto;
}

Answer 6

[Динар Гарипов]

Вторая часть - это то, что написано вами должно быть.
Если это уже готовая система, то вряд ли, не обладая экстрасенсорикой, можно угадать, где находится в ней файл. Мы же не знаем, на чем вы работаете. :)