Как я могу изменить ширину по умолчанию модального окна Twitter Bootstrap?

я попробовал следующий:



   <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')


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



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

846   30  

30 ответов:

обновление:

на bootstrap 3 вам нужно изменить модальный диалог. Так что в этом случае вы можете добавить класс modal-admin в том месте, где modal-dialog стоит.

Оригинальный Ответ (Bootstrap

есть ли определенная причина, по которой вы пытаетесь изменить его с помощью 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.

368  
2016-04-10 23:48:38

если вы хотите сделать его отзывчивым только с помощью CSS, используйте это:

.modal.large {
    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}

Примечание 1: я использовал .large класс, вы также можете сделать это на обычном .modal

примечание 2: в Bootstrap 3 отрицательное поле-left может больше не понадобиться(не подтверждено лично)

/*Bootstrap 3*/
.modal.large {
     width: 80%;
}

Примечание 3: в Bootstrap 3 и 4, есть modal-lg класса. Так этого может быть достаточно, но если вы хотите сделать это отзывчивый, вам все еще нужно исправление, которое я предоставил для Bootstrap 3.

в некоторых случаях fixed модалы используются, в этом случае вы можете попробовать width:80%; left:10%; (формула: слева = 100 - ширина / 2)

266  
2016-08-10 23:56:58

Если вы используете 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) */
    }
}
108  
2014-01-26 08:28:05

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

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

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

79  
2013-08-07 10:39:23

в Bootstrap 3+ наиболее подходящий способ изменить размер модального диалога-использовать свойство size. Ниже приведен пример, обратите внимание на 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>
41  
2015-08-25 13:51:34

на Bootstrap 3 вот как это сделать.

добавить modal-wide стиль вашей разметки HTML (как адаптировано из пример в Bootstrap 3 docs)

<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 чтобы это было сосредоточено сейчас.

34  
2013-09-04 04:00:16

на Bootstrap 3 все, что вам нужно, это 

<style>
    .modal .modal-dialog { width: 80%; }
</style>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<style>
  #myModal1 .modal-dialog {
    width: 80%;
  }
  #myModal2 .modal-dialog {
    width: 50%;
  }
</style>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
  80%
</button>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
  50%
</button>
<center>
  <!-- Modal -->
  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <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">
          custom width : 80%
        </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>


  <!-- Modal -->
  <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <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">
          custom width : 50%
        </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>

</center>
20  
2015-07-30 08:56:47

решение было принято из этой страница

$('#feedback-modal').modal({
    backdrop: true,
    keyboard: true
}).css({
    width: 'auto',
    'margin-left': function () {
        return -($(this).width() / 2);
    }
});
17  
2016-02-11 23:10:37

в v3 Bootstrap есть простой способ сделать модальное больше. Просто добавьте класс modal-lg рядом с модальным диалогом.

<!-- 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">
15  
2018-08-31 16:42:00

Bootstrap 3: чтобы поддерживать отзывчивые функции для небольших и сверхмалых устройств, я сделал следующее:

@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}
13  
2013-09-27 14:37:58

Если Bootstrap>3, Просто добавьте стиль в свой модальный.

<div class="modal-dialog" style="width:80%;">
  <div class="modal-content">
  </div>
</div>
7  
2016-06-13 08:43:06

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

$('.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

6  
2013-02-08 03:56:04

Это то, что я сделал, в моем обычае.CSS я добавил Эти строки и все. 

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

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

6  
2014-06-22 17:09:55

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

.modal .modal-dialog { width: 800px; }
5  
2013-09-09 11:15:37

сохраните отзывчивый дизайн, установите ширину на то, что вы хотите.

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

сохранить его простым.

4  
2014-02-19 15:09:13

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

.modal-dialog {
    width: 70%;
}
4  
2017-03-15 08:47:43

С Bootstrap 3 все, что требуется,-это процентное значение, заданное модальному диалогу через CSS

CSS

#alertModal .modal-dialog{
     width: 20%;
}
3  
2013-11-01 07:03:33

я использовал комбинацию 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  
2014-03-17 23:18:22

на Bootstrap 3 С помощью CSS, вы можете просто использовать:

body .modal-dialog {
    /* percentage of page width */
    width: 40%;
}

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

3  
2015-07-09 21:28:16

попробуйте что-то вроде следующего (см. Пример live 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>​
2  
2012-04-16 09:22:20

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

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

1 )добавьте дополнительный div вокруг модального диалога div с классом.контейнер -

<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>
2  
2014-01-15 13:50:38

добавьте следующее в свой css-файл

.popover{
         width:auto !important; 
         max-width:445px !important; 
         min-width:200px !important;
       }
2  
2015-04-10 14:43:39

Использовать Ниже Скрипт:

.modal {
  --widthOfModal: 98%;
  width: var(--widthOfModal) !important;
  margin-left: calc(calc(var(--widthOfModal) / 2) * (-1)) !important;
  height: 92%;

  overflow-y: scroll;
}

демо:

Demo on gif

2  
2018-06-20 15:55:37

достигнут ожидаемый результат с помощью,

.modal-dialog {
    width: 41% !important;
}
1  
2016-08-05 17:16:00

я использовал этот способ, и это работает прекрасно для меня

$("#my-modal")
.modal("toggle")
.css({'width': '80%', 'margin-left':'auto', 'margin-right':'auto', 'left':'10%'});
0  
2013-09-02 17:49:37

менее основанное решение (без 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);
}
0  
2013-11-26 01:41:09

я использовал 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  
2014-08-02 20:10:34 
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;
        }
0  
2017-05-18 14:17:19

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

$('#openModalPopupId').css ({"width": "80%", "left": "30%"});

0  
2017-05-24 10:28:38

Bootstrap 3.х.х

   <!-- 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;
    }

screenshot of code snippet

0  
2017-08-04 08:25:56

Comments

    Ничего не найдено.
Click here to cancel reply.