Как изменить ширину модального окна Bootstrap 3 в IE8?

Я должен поддерживать IE8. Само модальное окно работает нормально, но мои попытки изменить его размер (которые отлично работают в Firefox) не работают в IE8.

Я просто добавляю класс (широкий модальный в этом примере) в div модального диалога (второй вложенный в структуру Bootstrap) и применяю ширину через CSS, ничего необычного.

HTML:

       <div class="modal fade" id="modalTest" role="dialog">
            <div class="modal-dialog wide-modal">
              <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">Testing Modal</h4>
                </div>
                <div class="modal-body">
                  <img src="content/Example-Infographic.jpg" width="100%" />
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>

CSS:

.wide-modal {
    width: 60%;
}

Я попытался добавить класс в div выше и ниже без (положительного) эффекта. Он прекрасно работает там, где находится в Firefox, но не действует в IE8. Я также пробовал с шириной px, без разницы. У меня есть библиотека response.js, поэтому в целом IE8 ведет себя иначе.


modal-dialog twitter-bootstrap-3 internet-explorer-8
person Chaz    schedule 20.08.2013    source источник

Ответы (6)


arrow_upward
80
arrow_downward

В bootstrap 3 вам нужно назначить ширину не .modal классу, а .modal-dialog

#modalTest .modal-dialog
{
    width: 500px; /* your width */
}
person dante    schedule 02.09.2013
comment
Вау, как это работает? Переписать? Это бутстрап? Я использовал %, чтобы сделать его отзывчивым - person CodeGuru; 12.11.2013
comment
Это важно. Используйте .modal-dialog для Bootstrap 3! - person schiavuzzi; 13.12.2013
comment
Спасибо, это сводило меня с ума - person scarpacci; 28.01.2014
comment
Это самый простой способ сделать это. Должен быть отмечен как ответ. - person Geethanga; 14.03.2014
comment
я хотел, чтобы он был большим только на больших экранах, поэтому использовал:@media only screen and (min-width: 1224px) { #modalTest .modal-dialog { width: 45%;/* your width */ } } - person raklos; 24.04.2014

arrow_upward
14
arrow_downward

Я использовал комбинацию CSS и jQuery вместе с подсказками на этой странице, чтобы создать плавную ширину и высоту с помощью Bootstrap 3. Я также протестировал это в IE8 на Win7, и он отлично работает.

Во-первых, немного 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/

person Scott Dawson    schedule 17.10.2013

arrow_upward
10
arrow_downward

Я знаю, что уже поздно, но только что нашел в документы bs3, вы можете добавить класс modal-lg в свои модальные окна.

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
  Large modal
</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
     ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
  Small modal
</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-sm">
   <div class="modal-content">
     ...
   </div>
 </div>
</div>
person bto.rdz    schedule 26.02.2014
comment
лучший ответ - только тот, который использует встроенные опции BS3, и самый быстрый - person Sebastian Xawery Wiśniowiecki; 09.07.2015

arrow_upward
4
arrow_downward

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

    .modal-body {
        position: relative;
        padding: 20px;
        min-width: 800px; /* SET THE WIDTH OF THE MODAL */
    }

    .modal-content {
        position: relative;
        background-color: #fff;
        border: 1px solid #999;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 6px;
        outline: 0;
        -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.5);
        box-shadow: 0 3px 9px rgba(0,0,0,0.5);
        background-clip: padding-box;
        width: 900px; /* SET THE WIDTH OF THE MODAL */
        margin: 50px 0 0 -150px; /* CHANGE MARGINS TO ACCOMMODATE THE NEW WIDTH */
    }



<!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade" 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 class="modal-title">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><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
person Stirling    schedule 28.08.2013

arrow_upward
2
arrow_downward

Я думаю, вам нужно установить ширину в пикселях и настроить левое поле. Например,

.modal-dialog {
    width:700px;
    margin-left:-320px;
}

Левое поле должно быть равно половине ширины модального окна минус 30 пикселей для полосы прокрутки.

Вот пример Bootply: http://bootply.com/85213

person Zim    schedule 29.08.2013

arrow_upward

arrow_downward

person    schedule
comment
Или вы можете добавить класс в тело и сделать так: #class_body .modal-dialog { width: 60% ; } - person Sébastien Gicquel; 27.01.2015