Вертикально центрирующее модальное окно Bootstrap -- javascript поле с участием twitter-bootstrap поле с участием bootstrap-modal пол Связанный проблема

Vertically centering Bootstrap modal window


183
vote

проблема

русский

Я хотел бы центрировать мою модаль на ViewPort (Middle), я пытался добавить некоторые свойства CSS

 <код>  .modal { position: fixed; top:50%; left:50%; }      

Я использую этот пример http://jsfiddle.net/rniemeyer/wjjnd/

Я попробовал

 <код> $("#MyModal").modal('show').css(     {         'margin-top': function () {             return -($(this).height() / 2);         },         'margin-left': function () {             return -($(this).width() / 2);         }     })   
Английский оригинал

I would like to center my modal on the viewport (middle) I tried to add some css properties

 .modal { position: fixed; top:50%; left:50%; }    

I'm using this example http://jsfiddle.net/rniemeyer/Wjjnd/

I tried

$("#MyModal").modal('show').css(     {         'margin-top': function () {             return -($(this).height() / 2);         },         'margin-left': function () {             return -($(this).width() / 2);         }     }) 
</div
        
         
         

Список ответов

259
 
vote

Это делает работу: http://jsfiddle.net/srmlv/1140/ P >.

Он использует HELPER-DIV и некоторые пользовательские CSS. JavaScript или JQuery не требуется.

html (на основе bootstrap's Демо-код )

 <код> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>  <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="vertical-alignment-helper">         <div class="modal-dialog vertical-align-center">             <div class="modal-content">                 <div class="modal-header">                     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>                      </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> </div>   

<Сильные> CSS

 <код> .vertical-alignment-helper {     display:table;     height: 100%;     width: 100%;     pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */ } .vertical-align-center {     /* To center vertically */     display: table-cell;     vertical-align: middle;     pointer-events:none; } .modal-content {     /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */     width:inherit;     max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */     height:inherit;     /* To center horizontally */     margin: 0 auto;     pointer-events: all; }   

 

This does the job : http://jsfiddle.net/sRmLV/1140/

It uses a helper-div and some custom css. No javascript or jQuery required.

HTML (based on Bootstrap's demo-code)

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>  <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="vertical-alignment-helper">         <div class="modal-dialog vertical-align-center">             <div class="modal-content">                 <div class="modal-header">                     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>                      </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> </div> 

CSS

.vertical-alignment-helper {     display:table;     height: 100%;     width: 100%;     pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */ } .vertical-align-center {     /* To center vertically */     display: table-cell;     vertical-align: middle;     pointer-events:none; } .modal-content {     /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */     width:inherit;     max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */     height:inherit;     /* To center horizontally */     margin: 0 auto;     pointer-events: all; } 
</div
 
 
         
         
94
 
vote

Потому что ответ Gpcola не работал для меня, я немного отредактировал, поэтому его работает сейчас. Я использовал «маржинацию» вместо преобразования. Кроме того, я использую событие «Show» вместо «показанного» события, потому что после того, как он дал мне очень плохой прыжок позиционирования (видимый, когда у вас есть анимация Bootstrap). Обязательно установите дисплей на «Блокировка» перед позиционированием, в противном случае $ dialog.hight () будет 0, а модаль не будет полностью центрирован.

 <код> (function ($) {     "use strict";     function centerModal() {         $(this).css('display', 'block');         var $dialog  = $(this).find(".modal-dialog"),         offset       = ($(window).height() - $dialog.height()) / 2,         bottomMargin = parseInt($dialog.css('marginBottom'), 10);          // Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal         if(offset < bottomMargin) offset = bottomMargin;         $dialog.css("margin-top", offset);     }      $(document).on('show.bs.modal', '.modal', centerModal);     $(window).on("resize", function () {         $('.modal:visible').each(centerModal);     }); }(jQuery));   
 

Because gpcola's answer didn't work for me, I edited a bit so its works now. I used "margin-top" instead of transform. Also, i use the "show" instead of "shown" event because after it gave me a very bad jump of positioning (visible when you have bootstrap animations on). Be sure to set the display to "block" before positioning, otherwise $dialog.height() will be 0 and the modal will not be centered completely.

(function ($) {     "use strict";     function centerModal() {         $(this).css('display', 'block');         var $dialog  = $(this).find(".modal-dialog"),         offset       = ($(window).height() - $dialog.height()) / 2,         bottomMargin = parseInt($dialog.css('marginBottom'), 10);          // Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal         if(offset < bottomMargin) offset = bottomMargin;         $dialog.css("margin-top", offset);     }      $(document).on('show.bs.modal', '.modal', centerModal);     $(window).on("resize", function () {         $('.modal:visible').each(centerModal);     }); }(jQuery)); 
</div
 
 
         
         
81
 
vote

Это то, что я сделал для моего приложения. Если вы посмотрите на следующие классы в файле Bootstrap.css. Modal-dialog имеет заполнение по умолчанию экрана 10px и @media и (минимальная ширина: 768px). Таким образом, в моем пользовательском файле CSS я устанавливаю верхнюю прокладку на 15% для всех экранов без указания ширины экрана носителя. Надеюсь это поможет.

 <код> .modal-dialog {   padding-top: 15%; }   
 

This is what I did for my app. If you take a look at the following classes in the bootstrap.css file .modal-dialog has a default padding of 10px and @media screen and (min-width: 768px) .modal-dialog has a top padding set to 30px. So in my custom css file I set my top padding to be 15% for all screens without specifying a media screen width. Hope this helps.

.modal-dialog {   padding-top: 15%; } 
</div
 
 
   
   
63
 
vote

Лучший способ, которым я нашел для всех браузеров HTML5:

 <код> body.modal-open .modal {     display: flex !important;     height: 100%; }   body.modal-open .modal .modal-dialog {     margin: auto; }   
 

Best way I found for all HTML5 browsers:

body.modal-open .modal {     display: flex !important;     height: 100%; }   body.modal-open .modal .modal-dialog {     margin: auto; } 
</div
 
 
         
         
21
 
vote
 <код> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="table">         <div class="table-cell">             <div class="modal-dialog">                 <div class="modal-content">                     <div class="modal-header">                         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></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>     </div> </div>   

// стили

 <код> .table {  display: table;  height:100%; } .table-cell { display: table-cell; vertical-align: middle; }   
 
<!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="table">         <div class="table-cell">             <div class="modal-dialog">                 <div class="modal-content">                     <div class="modal-header">                         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></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>     </div> </div> 

// Styles

.table {  display: table;  height:100%; } .table-cell { display: table-cell; vertical-align: middle; } 
</div
 
 
       
       
14
 
vote

Верхний параметр переопределен в .modal.fade.in Чтобы заставить значение установленного в вашей пользовательской декларации, добавьте <код> !important ключевое слово после верхней части. Это заставляет браузер использовать это значение и игнорировать любые другие значения для ключевого слова. Это имеет недостаток, который вы не можете переопределить значение где-либо еще.

 <код> .modal {     position: fixed;     top: 50% !important;     left: 50%; }   
 

The top parameter is being overridden in .modal.fade.in to force the value set in your custom declaration, add the !important keyword after top. This forces the browser to use that value and ignore any other values for the keyword. This has the drawback that you can't override the value anywhere else.

.modal {     position: fixed;     top: 50% !important;     left: 50%; } 
</div
 
 
 
 
14
 
vote

Это работает для меня идеально:

 <код> .modal { text-align: center; padding: 0!important; }  .modal:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px; }  .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; }   

Полная DEMO URL: https://codepen.io/dimbslmh/full / mkfcc

 

this Works for me perfectly:

.modal { text-align: center; padding: 0!important; }  .modal:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px; }  .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } 

complete Demo URL : https://codepen.io/dimbslmh/full/mKfCc

</div
 
 
14
 
vote

настолько для Bootstrap 4 Следующий класс был добавлен для достижения этого для вас без JavaScript.

 <код> .vertical-alignment-helper {     display:table;     height: 100%;     width: 100%;     pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */ } .vertical-align-center {     /* To center vertically */     display: table-cell;     vertical-align: middle;     pointer-events:none; } .modal-content {     /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */     width:inherit;     max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */     height:inherit;     /* To center horizontally */     margin: 0 auto;     pointer-events: all; } 0  

Вы можете найти свою документацию Здесь .

Спасибо v.d, чтобы указывать, вам нужно добавить как диалогом .modal-dialog, to modical-dialog, чтобы вертикальный центр модал.

 

As of Bootstrap 4 the following class was added to achieve this for you without JavaScript.

modal-dialog-centered 

You can find their documentation here.

Thanks v.d for pointing out you need to add both .modal-dialog-centered to .modal-dialog to vertically center the modal.

</div
 
 
     
     
11
 
vote

Вы можете использовать:

 <код> .vertical-alignment-helper {     display:table;     height: 100%;     width: 100%;     pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */ } .vertical-align-center {     /* To center vertically */     display: table-cell;     vertical-align: middle;     pointer-events:none; } .modal-content {     /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */     width:inherit;     max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */     height:inherit;     /* To center horizontally */     margin: 0 auto;     pointer-events: all; } 1  

Чтобы центрировать его как вертикально, так и горизонтально.

 

you can use:

.modal {     position: fixed;     top: 50% !important;     left: 50%;     transform: translate(-50%, -50%); } 

to center it both vertically and horizontally.

</div
 
 
   
   
11
 
vote

Потому что большая часть ответа здесь не работает, или только частично работал:

 <код> body.modal-open .modal[style]:not([style='display: none;']) {     display: flex !important;     height: 100%; }   body.modal-open .modal[style]:not([style='display: none;']) .modal-dialog {     margin: auto; }   

Вы должны использовать селектор [STYLE], чтобы применить стиль на модальном, который в настоящее время активен вместо всех модалей. <Код> .in был бы великолепен, но оно, кажется, добавляется только после завершения перехода, что слишком поздно и делает для некоторых действительно плохих переходов. К счастью, оно появляется bootstrap, всегда применяет атрибут стиля на модальном виде, как он начинает показывать, поэтому это немного взлом, но это работает.

<Код> :not([style='display: none;']) PORTION - это обходной путь к загрузке, не правильно удаляя атрибут стиля и вместо этого устанавливать отображение стиля, если вы закрываете диалог.

 

Because most of the answer here didn't work, or only partially worked:

body.modal-open .modal[style]:not([style='display: none;']) {     display: flex !important;     height: 100%; }   body.modal-open .modal[style]:not([style='display: none;']) .modal-dialog {     margin: auto; } 

You have to use the [style] selector to only apply the style on the modal that is currently active instead of all the modals. .in would have been great, but it appears to be added only after the transition is complete which is too late and makes for some really bad transitions. Fortunately it appears bootstrap always applies a style attribute on the modal just as it is starting to show so this is a bit hacky, but it works.

The :not([style='display: none;']) portion is a workaround to bootstrap not correctly removing the style attribute and instead setting the style display to none when you close the dialog.

</div
 
 
   
   
8
 
vote

Вы можете добиться вертикального центра выравнивания на Bootstrap 3 модального типа:

 <код> .modal-vertical-centered {   transform: translate(0, 50%) !important;   -ms-transform: translate(0, 50%) !important; /* IE 9 */   -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */ }   

и добавьте этот класс CSS в контейнер «Modal-Dialog»

 <код> <div class="modal-dialog modal-vertical-centered"> ...   

рабочий пример jsfiddle: http://jsfiddle.net/u4nrx/

 

You can achieve vertical alignment center on Bootstrap 3 modal like that :

.modal-vertical-centered {   transform: translate(0, 50%) !important;   -ms-transform: translate(0, 50%) !important; /* IE 9 */   -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */ } 

and add this css class to the "modal-dialog" container

<div class="modal-dialog modal-vertical-centered"> ... 

jsFiddle working example : http://jsfiddle.net/U4NRx/

</div
 
 
         
         
8
 
vote

Самый простой и простейший способ сделать это - использовать Flexbox! Следующее вертикально выравнивается вертикальный модальный модаль в центре экрана и является настолько более чистым и проще, чем все другие решения, размещенные здесь:

 <код> body.modal-open .modal.in {   display: flex !important;   align-items: center; }   

Примечание. В то время как это самое простое решение, оно может не работать для всех из-за поддержки браузера: http: / /caniuse.com/#feat=flexbox

Это выглядит как (на обычно), то есть отстает от позади. В моем случае все продукты, которые я развиваю для себя или для клиентов, являются IE10 +. (Это не имеет смысла бизнес разумно инвестировать время разработки, поддерживаю более старые версии IE, когда он может быть использован для того, чтобы на самом деле разработать продукт и получить MVP быстрее). Это, безусловно, не роскошь, которую у каждого есть.

Я видел более крупные сайты, обнаружив, поддерживается ли Flexbox, поддерживается или не применим класс к корпусу страницы - но этот уровень интерфейсной инженерии довольно прочный, и вам все еще нуждается в откачении.

Я бы побудил людей охватить будущее полотна. Flexbox потрясающий, и вы должны начать использовать его, если сможете.

P.S. - Этот сайт действительно помог мне понять Flexbox в целом и применить его к любому случаю использования: http://flexboxfroggy.com/

Редактировать: в случае двух модалей на одной странице это должно относиться к .modal.in

 

The cleanest and simplest way to do this is to use Flexbox! The following will vertically align a Bootstrap 3 modal in the center of the screen and is so much cleaner and simpler than all of the other solutions posted here:

body.modal-open .modal.in {   display: flex !important;   align-items: center; } 

NOTE: While this is the simplest solution, it may not work for everyone due to browser support: http://caniuse.com/#feat=flexbox

It looks like (per usual) IE lags behind. In my case, all the products I develop for myself or for clients are IE10+. (it doesn't make sense business wise to invest development time supporting older versions of IE when it could be used to actually develop the product and get the MVP out faster). This is certainly not a luxury that everyone has.

I have seen larger sites detect whether or not flexbox is supported and apply a class to the body of the page - but that level of front-end engineering is pretty robust, and you'd still need a fallback.

I would encourage people to embrace the future of the web. Flexbox is awesome and you should start using it if you can.

P.S. - This site really helped me grasp flexbox as a whole and apply it to any use case: http://flexboxfroggy.com/

EDIT: In the case of two modals on one page, this should apply to .modal.in

</div
 
 
   
   
7
 
vote

<Сильные> Преимущества:

    .
  • Модальное содержимое доступно даже при повышении устройства
  • не использует <код> display:table-cell (это не предназначено для макетов)
  • не требует никаких модификаций для загрузки по умолчанию 3 модаль <код> markup
  • позиционирование - это чистые CSS. JS добавляется для закрытия модального клика / нажмите ниже и над ним
  • Я включил префиксную <код> SCSS для тех, кто использует <код> gulp или <код> grunt

Примечание. / 41377502/1891677502/1891677 "> Этот ответ (на данный момент они более или менее то же самое, но со временем они могут расходиться). Если вы найдете любую ошибку или проблему с этим, дайте мне знать, и я буду обновлять. Спасибо.


Чистый, не префикс <код> SCSS (для использования с <код> gulp / <код> markup0 ):

 <код> markup1  
 

Advantages:

  • modal contents accessible even when taller than device
  • doesn't use display:table-cell (that's not meant for layouts)
  • does not require any modifications to default Bootstrap 3 modal markup
  • positioning is pure CSS. The JS is added for closing the modal on click/tap below and above it
  • I included the un-prefixed SCSS for those who use gulp or grunt

// closes the modal on click/tap below/above the modal    $('.modal-dialog').on('click tap', function(e){      if (e.target.classList.contains('modal-dialog')) {      $('.modal').modal('hide');    }  })
.modal-dialog {    display: -webkit-box;    display: -webkit-flex;    display: -moz-box;    display: -ms-flexbox;    display: flex;    -webkit-box-orient: vertical;    -webkit-box-direction: normal;    -webkit-flex-direction: column;       -moz-box-orient: vertical;       -moz-box-direction: normal;        -ms-flex-direction: column;            flex-direction: column;    -webkit-box-pack: center;    -webkit-justify-content: center;       -moz-box-pack: center;        -ms-flex-pack: center;            justify-content: center;    overflow-y: auto;    min-height: -webkit-calc(100vh - 60px);    min-height: -moz-calc(100vh - 60px);    min-height: calc(100vh - 60px);  }  @media (max-width: 767px) {    .modal-dialog {      min-height: -webkit-calc(100vh - 20px);      min-height: -moz-calc(100vh - 20px);      min-height: calc(100vh - 20px);    }  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">    Launch demo modal  </button>    <div class="modal fade" id="myModal" 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">                  </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>

Note: I intend to keep this answer up to date with the latest specs of Bootstrap 3. For a Bootstrap 4 solution, see this answer (for now they are more or less the same, but in time they might diverge). If you find any bug or problem with it, let me know and I will update. Thanks.


Clean, un-prefixed SCSS (for use with gulp/grunt):

.modal-dialog {   display: flex;   flex-direction: column;   justify-content: center;   overflow-y: auto;   min-height: calc(100vh - 60px);   @media (max-width: 767px) {     min-height: calc(100vh - 20px);   } } 
</div
 
 
 
 
3
 
vote

еще один раствор CSS. Не работает для всплывающих окон, которые больше, чем порт просмотра.

 <код> markup2  

в <Код> markup3 Class Переопределение позиции в абсолютный (от относительного) и центрирования содержимого <Код> markup4

в <Код> markup5 Установка анимации перехода через <Код> markup6 , а не на перевод.

<Код> markup7 перемещает всплывающее окно чуть ниже центра в случае небольшого всплывающего окна и в случае длительных всплывающих окон, модал застрял с заголовком. Отсюда <код> markup8

надо дальше уточнить это.

 

Yet another CSS solution. Does not Work for popups that are bigger than the view port.

.modal-dialog {     position: absolute;     right: 0;     left: 0;     margin-top: 0;     margin-bottom: 0;  } .modal.fade .modal-dialog {     transition: top 0.4s ease-out;     transform: translate(0, -50%);     top: 0; } .modal.in .modal-dialog {     transform: translate(0, -50%);     top: 50%; } 

In .modal-dialog class overriding the position to absolute(from relative) and centering the content right:0, left: 0

In .modal.fade .modal-dialog , .modal.in .modal-dialog setting the transition animation over top rather than on translate.

margin-top moves the popup slightly below the center in case of small popup and in case of long popups, the modal is stuck with header. Hence margin-top:0, margin-bottom:0

Need to further refine it.

</div
 
 
3
 
vote

Для тех, кто использует engular-ui bootstrap, может добавить классы ниже на основе вышеуказанной информации:

Примечание. Другие изменения не требуются, и она будет разрешать все модали.

 <код> markup9  
 

For those who are using angular-ui bootstrap can add the below classes based on above info:

Note: No other changes are needed and it shall resolve all modals.

// The 3 below classes have been placed to make the modal vertically centered .modal-open .modal{     display:table !important;     height: 100%;     width: 100%;     pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */ }  .modal-dialog{     display: table-cell;     vertical-align: middle;     pointer-events: none; }  .modal-content {     /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */     width:inherit;     height:inherit;     /* To center horizontally */     margin: 0 auto;     pointer-events: all; } 
</div
 
 
3
 
vote

Нет необходимости нам JavaScript. Boostrap Modal добавляет .in класс, когда оно появляется. Просто измените комбинацию этого класса с ModalClassname.fade.in с Flex CSS, и вы закончите.

Добавьте эту CSS, чтобы центрировать свой модаль вертикально и горизонтально.

 <код> SCSS0  
 

No need to us javascript. Boostrap modal adds .in class when it appears. Just modify this class combination with modalclassName.fade.in with flex css and you are done.

add this css to center your modal vertically and horizontally.

.modal.fade.in {     display: flex !important;     justify-content: center;     align-items: center; } .modal.fade.in .modal-dialog {     width: 100%; } 
</div
 
 
2
 
vote

Мой выбор, просто маленький CSS: (не работает в IE8)

 <код> SCSS1  

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

Использование: bootstrap 3.3.4

 

My choice, just a little CSS: ( NOT working in IE8 )

.modal.fade .modal-dialog {     transform: translate(-50%, -80%); }  .modal.in .modal-dialog {     position: absolute;     left: 50%;     top: 50%;     transform: translate(-50%, -50%);     margin-top: 0px; } 

You can play with the first rule to change how the modal appears.

Using: Bootstrap 3.3.4

</div
 
 
2
 
vote

Просто добавьте следующие CSS на вас, это работает нормально для меня

 <код> SCSS2  
 

Simply add the following CSS to you existing one,It works fine for me

.modal {   text-align: center; } @media screen and (min-width: 768px) {     .modal:before {       display: inline-block;       vertical-align: middle;       content: " ";       height: 100%;     } } .modal-dialog {   display: inline-block;   text-align: left;   vertical-align: middle; } 
</div
 
 
2
 
vote

На основании Ответ Arany , но и учета страницы Scroll.

 <код> SCSS3  
 

Based on Arany's answer, but also accounting for page scroll.

(function($) {     "use strict";     function positionModals(e) {         var $this = $(this).css('display', 'block'),             $window = $(window),             $dialog = $this.find('.modal-dialog'),             offset = ($window.height() - $window.scrollTop() - $dialog.height()) / 2,             marginBottom = parseInt($dialog.css('margin-bottom'), 10);          $dialog.css('margin-top', offset < marginBottom ? marginBottom : offset);     }      $(document).on('show.bs.modal', '.modal', positionModals);      $(window).on('resize', function(e) {         $('.modal:visible').each(positionModals);     }); }(jQuery)); 
</div
 
 
2
 
vote

Я думаю, что это немного чище чистые CSS-раствор CSS, чем решение Rens de Nobel. Также это не предотвращает закрытие диалогового окна, нажав на улицу.

http://plnkr.co/edit/jcgvzq?p=pReview < / P >.

Просто добавьте некоторые класс CSS для контейнера Div с классом. Modal-Dialog, чтобы получить более высокую специфику, чем CSS Bootstraps, например, .ccented.

<Сильные> HTML

 <код> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">   <div class="modal-dialog centered modal-lg">     <div class="modal-content">       ...     </div>   </div> </div>   

и сделайте это. Modal-dialog.Center Conticer исправлен и правильно расположен.

<Сильные> CSS

 <код> .modal .modal-dialog.centered {     position: fixed;     bottom: 50%;     right: 50%;     transform: translate(50%, 50%); }   

или даже проще, используя flexbox.

<Сильные> CSS

 <код> .modal {     display: flex;     align-items: center;     justify-content: center; }   

 

I think this is a bit cleaner pure CSS solution than Rens de Nobel's solution. Also this does not prevent from closing the dialog by clicking outside of it.

http://plnkr.co/edit/JCGVZQ?p=preview

Just add some CSS class to DIV container with .modal-dialog class to gain higher specificity than the bootstraps CSS, e.g. .centered.

HTML

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

And make this .modal-dialog.centered container fixed and properly positioned.

CSS

.modal .modal-dialog.centered {     position: fixed;     bottom: 50%;     right: 50%;     transform: translate(50%, 50%); } 

Or even simpler using flexbox.

CSS

.modal {     display: flex;     align-items: center;     justify-content: center; } 
</div
 
 
 
 
2
 
vote

 <Код> .modal.in .modal-dialog {      position: relative;      top: 50%;      transform: translateY(-50%);  }  
 

.modal.in .modal-dialog {      position: relative;      top: 50%;      transform: translateY(-50%);  }
</div
 
 
1
 
vote

Это работает в BS3, не тестирован в V2. Он центрирует модаль вертикально. Обратите внимание, что он будет переходить там - если вы хотите, чтобы это просто появилось в положении редактировать CSS <код> transition свойство для <код> .modal-dialog

 <код> centerModal = function() {     var $dialog = $(this).find(".modal-dialog"),         offset = ($(window).height() - $dialog.height()) / 2;      // Center modal vertically in window     $dialog.css({         'transform': 'translateY(' + offset + 'px) !important',     }); };  $('.modal').on('shown.bs.modal', centerModal); $(window).on("resize", function() {     $('.modal').each(centerModal); });   
 

This works in BS3, not tested in v2. It centers the modal vertically. Note that it will transition there - if you want it to just appear in position edit CSS transition property for .modal-dialog

centerModal = function() {     var $dialog = $(this).find(".modal-dialog"),         offset = ($(window).height() - $dialog.height()) / 2;      // Center modal vertically in window     $dialog.css({         'transform': 'translateY(' + offset + 'px) !important',     }); };  $('.modal').on('shown.bs.modal', centerModal); $(window).on("resize", function() {     $('.modal').each(centerModal); }); 
</div
 
 
1
 
vote
 <код> e(document).on('show.bs.modal', function () {         if($winWidth < $(window).width()){             $('body.modal-open,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',$(window).width()-$winWidth)         }     });     e(document).on('hidden.bs.modal', function () {         $('body,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',0)     });   
 
e(document).on('show.bs.modal', function () {         if($winWidth < $(window).width()){             $('body.modal-open,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',$(window).width()-$winWidth)         }     });     e(document).on('hidden.bs.modal', function () {         $('body,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',0)     }); 
</div
 
 
 
 
1
 
vote

Это берет ответ Arany и делает его работать, если модаль выше высоты экрана:

 <код> function centerModal() {     $(this).css('display', 'block');     var $dialog = $(this).find(".modal-dialog");     var offset = ($(window).height() - $dialog.height()) / 2;     //Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal     var bottomMargin = $dialog.css('marginBottom');     bottomMargin = parseInt(bottomMargin);     if(offset < bottomMargin) offset = bottomMargin;     $dialog.css("margin-top", offset); }  $('.modal').on('show.bs.modal', centerModal); $(window).on("resize", function () {     $('.modal:visible').each(centerModal); });   
 

This takes Arany's answer and makes it work if the modal is taller than the height of the screen:

function centerModal() {     $(this).css('display', 'block');     var $dialog = $(this).find(".modal-dialog");     var offset = ($(window).height() - $dialog.height()) / 2;     //Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal     var bottomMargin = $dialog.css('marginBottom');     bottomMargin = parseInt(bottomMargin);     if(offset < bottomMargin) offset = bottomMargin;     $dialog.css("margin-top", offset); }  $('.modal').on('show.bs.modal', centerModal); $(window).on("resize", function () {     $('.modal:visible').each(centerModal); }); 
</div
 
 
   
   
1
 
vote

Чтобы добавить вертикальное модальное центрирование в Bootstrap Modal.js Я добавил это в конце <код> Modal.prototype.show Функции:

 <код> .modal .modal-dialog.centered {     position: fixed;     bottom: 50%;     right: 50%;     transform: translate(50%, 50%); } 0  
 

To add vertical modal centering to bootstrap modal.js I added this at the end of the Modal.prototype.show function:

var $modalDialog = $('.modal-dialog'),         modalHeight = $modalDialog.height(),         browserHeight = window.innerHeight;      $modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2}); 
</div
 
 
 
 
0
 
vote

Чтобы сделать модаль верным диалогом со средним диалоговом окна.

/ * Примечание:

1.even Вам не нужно назначать селектор, он найдет все модаль из документа и сделать его вертикально средним

2. Чтобы избежать среднего. Некоторые конкретные модальные, чтобы быть IT-центром, вы можете использовать: не селектор в Event Event

* /

 <код> .modal .modal-dialog.centered {     position: fixed;     bottom: 50%;     right: 50%;     transform: translate(50%, 50%); } 1  

от Милана Панды

 

To make Modal verically Align Middle All dialog.

/* Note:

1.Even you don't need to assign selector , it will find all modal from the document and make it vertically middle

2.To avoid middle some specific modal to be it center you can use :not selector in click event

*/

 $( "[data-toggle='modal']" ).click(function(){      var d_tar = $(this).attr('data-target');       $(d_tar).show();         var modal_he = $(d_tar).find('.modal-dialog .modal-content').height();       var win_height = $(window).height();      var marr = win_height - modal_he;      $('.modal-dialog').css('margin-top',marr/2);   }); 

From Milan Pandya

</div
 
 
0
 
vote

Используйте этот простой скрипт, который центрирует модали.

Если вы хотите, вы можете установить пользовательский класс (например, .modal.modal-vcenter вместо .modal) для ограничения функциональности только к некоторым модалам.

 <код> .modal .modal-dialog.centered {     position: fixed;     bottom: 50%;     right: 50%;     transform: translate(50%, 50%); } 2  

также добавьте это исправление CSS для горизонтального интервала модала; Мы показываем прокрутки на модалах, прокрутки тела автоматически скрыты загрузкой:

 <код> .modal .modal-dialog.centered {     position: fixed;     bottom: 50%;     right: 50%;     transform: translate(50%, 50%); } 3  
 

Use this simple script that centers the modals.

If you want you can set a custom class (ex: .modal.modal-vcenter instead of .modal) to limit the functionality only to some modals.

var modalVerticalCenterClass = ".modal";  function centerModals($element) {     var $modals;     if ($element.length) {       $modals = $element;     } else {     $modals = $(modalVerticalCenterClass + ':visible'); } $modals.each( function(i) {     var $clone = $(this).clone().css('display', 'block').appendTo('body');     var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);     top = top > 0 ? top : 0;     $clone.remove();     $(this).find('.modal-content').css("margin-top", top); }); } $(modalVerticalCenterClass).on('show.bs.modal', function(e) {     centerModals($(this)); }); $(window).on('resize', centerModals); 

Also add this CSS fix for the modal's horizontal spacing; we show the scroll on the modals, the body scrolls is hidden automatically by Bootstrap:

/* scroll fixes */ .modal-open .modal {   padding-left: 0px !important;   padding-right: 0px !important;   overflow-y: scroll; } 
</div
 
 
0
 
vote

Другой ответ CSS на этот вопрос ...
Это решение использует CSS только для достижения желаемого эффекта, в то же время сохраняющую способность закрывать модаль, щелкнув его за его пределами. Это также позволяет вам установить <код> .modal-content максимум высоты и ширины, чтобы ваш всплывающийся соперник не рост за пределы просмотра. Свиток автоматически появится, когда контент растет за пределами модального размера.

Примечание:
Bootstrap рекомендуется <код> .modal-dialog <Код> div должен быть опущен для того, чтобы это было правильно работать (кажется, ничего не нарушает). Проверено в Chrome 51 и IE 11.

CSS-код:

 <код> .modal {    height: 100%;    width: 100%; }  .modal-content {    margin: 0 auto;    max-height: 600px;    max-width: 50%;    overflow: auto;    transform: translateY(-50%); }   

<Сильные> Редактировать: .modal-dialog CLASS позволяет выбрать, может ли пользователь закрыть модаль, щелкнув за пределами самого модала. Большинство модальных имеют явную кнопку «Закрыть» или «Отмена». Держите это в виду при использовании этого обходного пути.

 

Another CSS answer to this question...
This solution uses CSS only to achieve the desired effect while still maintaining the ability to close the modal by clicking outside of it. It also allows you to set .modal-content height and width maximums so that your pop-up won't grow beyond the viewport. A scroll will automatically appear when the content grows beyond the modal size.

note:
The Bootstrap recommended .modal-dialog div should be omitted in order for this to work properly (doesn't seem to break anything). Tested in Chrome 51 and IE 11.

CSS Code:

.modal {    height: 100%;    width: 100%; }  .modal-content {    margin: 0 auto;    max-height: 600px;    max-width: 50%;    overflow: auto;    transform: translateY(-50%); } 

EDIT: The .modal-dialog class allows you to choose whether or not a user can close the modal by clicking outside of the modal itself. Most modals have an explicit 'close' or 'cancel' button. Keep this in mind when using this workaround.

</div
 
 
0
 
vote

Лучшее решение для централизации вашего модала с шириной и высотой, в CSS Add и в модальном добавлении этого «централизовать» как класс ..

 <код> .centralize{    position:absolute;    left:50%;    top:50%;     background-color:#fff;    transform: translate(-50%, -50%);    width: 40%; //specify watever u want    height: 50%;    }   
 

The best solution to centralize your modal with width and height is, in css add and in modal add this 'centralize' as a class..

.centralize{    position:absolute;    left:50%;    top:50%;     background-color:#fff;    transform: translate(-50%, -50%);    width: 40%; //specify watever u want    height: 50%;    } 
</div
 
 
0
 
vote

<Сильные> Вертикально сосредоточены Добавить .modal-dialog - сосредоточено в диалоговом диалоге .modal - вертикально-центр модаль

. Запустите демодаль

 <код> <!-- Modal --> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">   <div class="modal-dialog modal-dialog-centered" role="document">     <div class="modal-content">       <div class="modal-header">         <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>         <button type="button" class="close" data-dismiss="modal" aria-label="Close">           <span aria-hidden="true">&times;</span>         </button>       </div>       <div class="modal-body">         ...       </div>       <div class="modal-footer">         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>         <button type="button" class="btn btn-primary">Save changes</button>       </div>     </div>   </div> </div>   
 

Vertically centered Add .modal-dialog-centered to .modal-dialog to vertically center the modal

Launch demo modal

<!-- Modal --> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">   <div class="modal-dialog modal-dialog-centered" role="document">     <div class="modal-content">       <div class="modal-header">         <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>         <button type="button" class="close" data-dismiss="modal" aria-label="Close">           <span aria-hidden="true">&times;</span>         </button>       </div>       <div class="modal-body">         ...       </div>       <div class="modal-footer">         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>         <button type="button" class="btn btn-primary">Save changes</button>       </div>     </div>   </div> </div> 
</div
 
 

Связанный проблема

2  Совет инструмента не работает на текстовой зоне Bootstrap  ( Tool tip not working on text area bootstrap ) 
У меня есть форма Bootstrap 3, на которой я применяю Tootip через скрипт. Toottip работает нормально на поле ввода, но не работает над Textarea. <код> <div ...

0  Скачать изображение из результатов API  ( Download image from api results ) 
Я создаю приложение, которое использует онлайн API для рерантива изображений на основе ключевого слова для поиска. Я запускаю петлю Foreach для рендеринга 12 ...

-2  Как мне получить значение флажков ряд в таблице JavaScript  ( How do i get value of a checkboxes of a row in a table javascript ) 
Это может быть глупым вопросом, но мне нужно получить значения проверенных флажков определенной строки. <код> script5 Так что в основном я хочу, чтобы по...

1  UI-маршрутизатор в ионной структуре  ( Ui router in ionic framework issue ) 
У меня проблемы с тем, чтобы получить свои маршруты, чтобы соответствовать моим взглядам. У меня есть следующие маршруты: <код> .state('tab.account', { ur...

1  Код образец плагина PhoneGap VideoPlayer  ( Phonegap videoplayer plugin sample code ) 
Я пытаюсь реализовать видеозаписи в моем телефонном приложении. У меня есть идея реализовать этот плагин: https://github.com/dawsonloudon/videoPlayer Эт...

0  Как вы делаете Div пойти по другому меню Div / NAV, которое не исправлено?  ( How do you make a div go under another div nav menu which is not fixed ) 
Я пытаюсь сделать Div, идут под очередной div, в котором ни один не фиксирован элементы. Вот мой код: <Код> ul { list-style-type: none; margin: ...

1  Если для JavaScript в XSLT не работает [дубликат]  ( If greater than javascript into xslt doesnt work ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

3  Есть ли способ различить связь против мышиных взаимодействий в Windows 8 (HTML / JS)  ( Is there any way to distinguish touch vs mouse interactions in windows 8 html ) 
Я в настоящее время строю приложение, которое имеет много внимания на панорамирование, которое выглядит и чувствует себя красиво, когда касается и манипулируе...

5  модальный всплывающий как Google  ( Modal pop up like google ) 
Как сделать модальное всплывающее окно, как Gmail (когда мы пытаемся загрузить EXE, который генерирует крышки прокрутки страницы) ...

1  Обновление поле PDF штрих-кода в IOS и устройстве Android  ( Updating a pdf barcode field in ios and android device ) 
Я создал одну корпус Acrobat, используя радиообъекты, текстовое поле, кнопку, флажок и штрих-код в Adobe Acrobat Pro. После этого я открыл эту форму в Adobe...

0  Boxy Эта отправка не работает  ( Boxy this submit does not work ) 
У меня есть несколько форм в моем коде, и я хочу назначить подтверждающее поле, чтобы показать, прежде чем он будет отправлен. Следовательно, я использую Bo...

2  Как получить выделенные тексты?  ( How to get the highlighted texts ) 
Я пытаюсь получить выбранные тексты от пользователя (выделенный текст, который выделяет пользователь). У меня есть следующее: <код> function getSelectedTe...

1  Как проверить отметку Check Column в сетке?  ( How to check mark a check column in a grid ) 
У меня есть флажок Check Column на сетке, которая мне нужна для программически проверки. Вот как сценарий Check Column: <код> columns: { items:[ ...

5  Пользовательский стиль на раскрывающемся меню React-Buttrap  ( Custom style on react bootstraps dropdown menu component ) 
Я пытаюсь применить пользовательский стиль CSS к компоненту RACH BETSTRAP, но не может понять, как получить доступ к элементам, которые не являются явными в J...

0  Разрежьте строку в JavaScript [Закрыто]  ( Cut the string in javascript ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> закрыт. Этот вопрос не соответствует Рекомендациям переполнения ...




© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.