Можно ли настроить стиль bootstrap $modal

Ответ 1

Если у вас есть доступ к HTML, то вы можете добавить дополнительный класс к модальному, как <div class="modal custom">, тогда вы можете его стиль как .modal.custom. Полный пример ниже

Рабочий демонстрационный пример

HTML

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
  Variable Modal
</button>

<!-- Modal -->
<div class="modal custom fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
   ....

CSS

.modal.custom .modal-dialog {
    width:50%;
    margin:0 auto;
    /*add what you want here*/
}

Сообщите мне, если у вас есть дополнительные вопросы в комментариях.

Ответ 2

В Bootstrap модалы автоматически изменят размер в зависимости от размера содержимого внутри них. Если это все, что вам нужно, BS делает это за вас...

Если вы хотите стилизовать каждый модальный независимо, вы хотите использовать тег id в дополнение к тегам class modal. Вы можете ссылаться на этот id в своем CSS с помощью #.

например.

#modalblue {
  background-color:blue;
}
#modalgreen {
  background-color:green;
}

и соответствующая разметка

<div class="modal" some-other-attributes id="modalblue">
  ...modal content
</div>
<div class="modal" some-other-attributes id="modalgreen">
  ...modal content
</div>

Ответ 3

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

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#green-modal">
  Launch demo modal
</button>

<div class="modal fade" id="green-modal" 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 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>

Модаль №2

 <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#red-modal">
  Launch demo modal
</button>

<div class="modal fade" id="red-modal" 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 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>

Теперь вы можете легко нацелить свой css, используя thos id. Например.

#green-modal { background-color: #00FF00; }
#red-modal { background-color: #FF0000; }

Надеюсь, что это поможет.

Ответ 4

            <div id="addtaskmodal" class="modal hide fade" tabindex="-1" role="dialog" style="width:80%;left:30%;right:30%;top:5%;bottom:5%; position:fixed; overflow:hidden;" >
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3>New Task</h3>
              </div>
              <div class="modal-body" style="max-height:500px;" >
                <p>My modal content here…</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-success" id="startnow" onClick="createNewTask('start')" >Start
                now</button>
                <button type="button" class="btn btn-success"  onclick="createNewTask('')" >Save</button>
                <button class="btn" data-dismiss="modal">Close</button>
              </div>
            </div>
            <div id="addclientmodal" class="modal hide fade" tabindex="-1" role="dialog" >
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3>New Task</h3>
              </div>
              <div class="modal-body" style="max-height:500px;" >
                <p>My modal content here…</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-success"  onclick="saveNewClient()" >Save</button>
                <button class="btn" data-dismiss="modal">Close</button>
              </div>
            </div>

здесь у меня есть два модальных окна, динамически загружайте содержимое с помощью ajax, у меня был встроенный стиль для модального всплывающего окна, также вы можете добавить стиль css, обратив внимание на #id

Ответ 5

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

Я просто назвал функцию javascript, где я устанавливаю стиль для .modal

function changeCSS(){

setTimeout(function(){

    var allModals = document.getElementsByClassName('modal');
        for (var i = 0; i < allModals.length; i++) {

            console.log(allModals[i]);
            allModals[i].style.width="60%";
        }
    },1500);
}

Если кто-то найдет лучший способ сделать это, ответьте на этот вопрос, я обязательно попробую и назначу вам щедрость, если он сработает.

Ответ 6

Я полагаю, что если вы используете консоль разработчика (в зависимости от того, какой браузер вы используете), вы обнаружите, что непосредственный стиль класса ".modal" не влияет на модалы, так как основной стиль можно найти в применяемых классах к модальным подэлементам. (например, modal-dialog,.modal-content). В вашем случае вам нужно сделать следующее:

.modal-content{
    border-radius: 0;
    background-clip: border-box;
    min-height: 400px;
        min-width: 400px;
}

Ответ 7

Обновление 2017 - Bootstrap 4

Структура модала изменилась с момента загрузки Bootstrap 3, поэтому теперь для настройки стиля позиции, размера или мода необходимо использовать другой CSS. Чтобы изменить ширину модальности, установите max-width на modal-dialog, для exmaple:

.modal.custom .modal-dialog {
    max-width: 50%;
}

Пользовательская модальная демонстрация