Bootstrap 3 mod dikey konum merkezi


270

Bu iki bölümlü bir soru:

  1. Kipin tam yüksekliğini bilmediğinizde kipi nasıl ortada dikey olarak konumlandırabilirsiniz?

  2. Kipin ortalanması ve taşması mümkündür: kipin gövdesinde otomatik, ancak kipin ekran yüksekliğini aşarsa?

Bunu kullanarak denedim:

.modal-dialog {
  height: 80% !important;
  padding-top:10%;
}

.modal-content {
  height: 100% !important;
  overflow:visible;
}

.modal-body {
  height: 80%;
  overflow: auto;
}

Bu, içerik dikey ekran boyutundan çok daha büyük olduğunda ihtiyacım olan sonucu veriyor, ancak küçük modal içerikler için neredeyse kullanılamaz.


1
@Heiken nedense bu beni ekrandan aşağı
atlatıyor,

Yanıtlar:


374
.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;
}

Ve biraz .fade sınıfını, orta yerine pencerenin üst kenarından çıktığından emin olmak için ayarlayın


Aslında bunu yanlışlıkla geçersiz kılıyordum, aslında sahne arkasında çalıştığına dikkat çektiğiniz için teşekkürler.
Dorian

Bu muhtemelen sadece bootstrap modelini değil, diğer her şeyi dikey olarak ortalamanın en iyi yoludur. css-tricks.com/centering-in-the-unknown
Mark S

4
Bunun Mobil cihazlarda çok iyi çalışmadığını açıklıyorum. Çünkü ": after" tanımı% 100 yüksekliğe sahiptir ve kalıcı olarak sayfanın altına otomatik olarak hareket ettirilebilir. Ben sadece .modal {display: flex! Önemli;} .modal-dialog {kenar boşluğu: otomatik}. İnsanların% 92,97'si bu CSS mülkünü zaten destekliyor, ancak genel destek için kenar boşluklarını ayarlamak için JavaScript kullanabilir.
Walter Chapilliquen - wZVanG

21
Kesinlikle harika, ama sadece 768 pikselin üzerinde kullanmanızı ve mobil cihazlarda varsayılan ayarı bırakmanızı tavsiye ederim. Ekran yüksekliği küçük olduğunda modals için en üst konum en iyisidir. Ayrıca, bir animasyonun merkezden görünmesini sağlamak için ayarladım, burada herkesin ihtiyacı varsa çalışma örneği: codepen.io/anon/pen/zGBpNq
bwitkowicz

Bu çözüm modal pencereyi 2 piksel sağa kaydırır, neden: önce eleman. Ancak bu, aşağıdakiler için aynı kodu ekleyerek çözülebilir: after
Cypher

146

1. Kipin tam yüksekliğini bilmediğinizde kipi nasıl ortada dikey olarak konumlandırabilirsiniz?

Bir yükseklik bildirmeden Bootstrap 3 Modal'ı mutlak ortalamak için, önce stil sayfanıza ekleyerek Bootstrap CSS'nin üzerine yazmanız gerekir:

.modal-dialog-center { /* Edited classname 10/03/2014 */
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
}

Bu, kalıcı iletişim kutularını sol üst köşeyi pencerenin ortasına yerleştirecektir.

Bu medya sorgusunu eklememiz gerekiyor, aksi takdirde küçük cihazlarda sol kenar boşluğu yanlış:

@media (max-width: 767px) {
  .modal-dialog-center { /* Edited classname 10/03/2014 */
    width: 100%;
  }
} 

Şimdi JavaScript ile konumunu ayarlamamız gerekecek. Bunu yapmak için elemana boyunun ve genişliğinin yarısına eşit negatif bir üst ve sol kenar boşluğu veririz. Bu örnekte Bootstrap ile kullanılabildiği için jQuery kullanacağız.

$('.modal').on('shown.bs.modal', function() {
    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return -($(this).outerHeight() / 2);
        },
        'margin-left': function () {
            return -($(this).outerWidth() / 2);
        }
    });
});

Güncelleme (01/10/2015):

Finik'in cevabına ekleme . Bilinmeyende Merkezlemeye Verilen Krediler .

.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px; /* Adjusts for spacing */
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

Negatif kenar boşluğuna dikkat edin değil mi? Bu, satır içi bloğun eklediği alanı kaldırır. Bu boşluk, modalın @media width <768px sayfasının altına atlamasına neden olur.

2. Kipin ortalanması ve taşması olabilir: kipte gövdede otomatik, ancak kip yalnızca ekran yüksekliğini aşarsa?

Bu, modal gövdeye taşma-y: otomatik ve maksimum yükseklik vererek mümkündür. Bu, düzgün çalışması için biraz daha fazla iş gerektirir. Bunu stil sayfanıza ekleyerek başlayın:

.modal-body {
    overflow-y: auto;
}
.modal-footer {
    margin-top: 0;
}

Pencere yüksekliğini almak ve önce modsal içeriğin maksimum yüksekliğini ayarlamak için jQuery'yi tekrar kullanacağız. Daha sonra modal içeriği modal üstbilgi ve modal altbilgi ile çıkararak modal gövdenin maksimum yüksekliğini ayarlamamız gerekir:

$('.modal').on('shown.bs.modal', function() {
    var contentHeight = $(window).height() - 60;
    var headerHeight = $(this).find('.modal-header').outerHeight() || 2;
    var footerHeight = $(this).find('.modal-footer').outerHeight() || 2;

    $(this).find('.modal-content').css({
        'max-height': function () {
            return contentHeight;
        }
    });

    $(this).find('.modal-body').css({
        'max-height': function () {
            return (contentHeight - (headerHeight + footerHeight));
        }
    });

    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return -($(this).outerHeight() / 2);
        },
        'margin-left': function () {
            return -($(this).outerWidth() / 2);
        }
    });
});

Bootstrap 3.0.3 ile çalışan bir demo bulabilirsiniz: http://cdpn.io/GwvrJ EDIT: Daha duyarlı bir çözüm için güncellenmiş sürümü kullanmanızı tavsiye ederim: http://cdpn.io/mKfCc

Güncelleme (30/11/2015):

function setModalMaxHeight(element) {
  this.$element     = $(element);  
  this.$content     = this.$element.find('.modal-content');
  var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
  var dialogMargin  = $(window).width() < 768 ? 20 : 60;
  var contentHeight = $(window).height() - (dialogMargin + borderWidth);
  var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
  var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
  var maxHeight     = contentHeight - (headerHeight + footerHeight);

  this.$content.css({
      'overflow': 'hidden'
  });

  this.$element
    .find('.modal-body').css({
      'max-height': maxHeight,
      'overflow-y': 'auto'
  });
}

$('.modal').on('show.bs.modal', function() {
  $(this).show();
  setModalMaxHeight(this);
});

$(window).resize(function() {
  if ($('.modal.in').length != 0) {
    setModalMaxHeight($('.modal.in'));
  }
});

( Yukarıdaki düzenleme ile 30/11/2015 http://cdpn.io/mKfCc güncellendi )


1
mükemmel cevap ve yazı! Ancak, bu da canlandırılabilir mi? Sadece ortaya çıktığında harika çalışıyor, ama animasyon ne olacak? Ben
işteyim

Kipte soluk bir sınıf ekleyebilirsiniz. Cdpn.io/mKfCc
dimbslmh

Codepen üzerinde harika çalışıyor gibi görünse de, projemde çalışamıyorum. Sanırım sadece kodu eklemeniz ve doğru bir şeyi değiştirmemeniz gerekiyor?
scooterlord

1
Tekrar merhaba! Aşağıdaki fark ettim. İlk mod ilk açıldığında, bir kez yeniden boyutlandırılana kadar doğru kenar boşluğu yanlış olur. Bunun hakkında bir fikrin var mı?
scooterlord

1
@bernie Belgede kısa modal açık olan kodumun bir çatalıyla Browserstack'ta ekran görüntüleri yaptım. zaten: browserstack.com/screenshots/… Browserstack, ekran görüntüleri için henüz v9.3.x'i desteklemiyor (ancak) tarif ettiğinize benzer bir şey iOS 6.0'da gerçekleşir (Bkz. ekran görüntüsü iPad 3. (6.0) (Portre)). Belki de v9.3.2'de dönen eski bir hata. İsterseniz forums.developer.apple.com/community/safari-and-web/…
dimbslmh

37

Çözümüm

.modal-dialog-center {
    margin-top: 25%;
}

    <div id="waitForm" class="modal">
        <div class="modal-dialog modal-dialog-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 id="headerBlock" class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <span id="bodyBlock"></span>
                    <br/>
                    <p style="text-align: center">
                        <img src="@Url.Content("~/Content/images/progress-loader.gif")" alt="progress"/>
                    </p>   
                </div>
            </div>
        </div>
    </div>

Yous dolgu malzemesi kullanmalıdır. bindirmeyi tıkladığınızda marjin kapanma eylemini
kıracaktır

2
% 25'e ayarlanan marj üstü, modalın% 50 boyunda olmasını gerektirir.
isyan

28

İle kolayca sabitlenebilir display: flex

.modal-dialog {
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal.fade .modal-dialog {
  transform: translate(0, -100%);
}

.modal.in .modal-dialog {
  transform: translate(0, 0);
}

Önek ile

.modal-dialog {
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -100%);
          transform: translate(0, -100%);
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

2
Bu, 100vh yükseklik nedeniyle fonun tıklanmasını önler. "Arka plan:" statik "" ayarlar için uygundur.
ianstigator

bu neden animasyon sorunu yavaş yavaş
Viswanath Lekshmanan

23

Saf bir css çözümü buldum! Css3 olsa da, yani ie8 veya daha düşük desteklenmez, ancak bunun dışında ios, android, ie9 +, krom, firefox, masaüstü safari üzerinde test edilir ve çalışır.

Aşağıdaki css kullanıyorum:

.modal-dialog {
  position:absolute;
  top:50% !important;
  transform: translate(0, -50%) !important;
  -ms-transform: translate(0, -50%) !important;
  -webkit-transform: translate(0, -50%) !important;
  margin:auto 5%;
  width:90%;
  height:80%;
}
.modal-content {
  min-height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0; 
}
.modal-body {
  position:absolute;
  top:45px; /** height of header **/
  bottom:45px;  /** height of footer **/
  left:0;
  right:0;
  overflow-y:auto;
}
.modal-footer {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

İşte bir keman. http://codepen.io/anon/pen/Hiskj

Birden fazla moda durumunda tarayıcıyı dizlerine getiren ekstra ağır bir javascript olmadığı için bunu doğru cevap olarak seçmek.


8
JavaScript kullanmanın tüm amacı, modun bilinmeyen yüksekliğini elde etmekti . Çözümünüzün sabit yüksekliği% 80'dir, bu da kendi sorunuza cevap vermez: "Modalın tam yüksekliğini bilmediğinizde modalı merkezde nasıl dikey olarak konumlandırabilirsiniz ?"
dimbslmh

... yükseklik boyutu, ekran yüksekliğine kıyasla MAXIMUM mod yüksekliğini sınırlayacak şekilde ayarlanmıştır. Ancak, çeviri yüzdesi İÇERİK yüksekliğine göre ayarlanır.
scooterlord

3
Kalıcı kutunun boyutunu değiştirmeyen bir çözüm elde etmek istiyorsanız, aşağıdaki css çözümünü de deneyin: tweaks.klickagent.ch/#30.05.2014_TwitterBootstrapCenterModal
klickagent.ch 30:14

Çok güzel. Ancak tarif ettiğim yaklaşımdan farklı bir yaklaşımı var. Sizin durumunuzda tüm model yukarı ve aşağı hareket eder, benim durumumda taşan bir eleman oluşturulduğunda. Çok güzel olsa! Bunu sevdim!
scooterlord

Bu, yüksekliğin ayarlanmasını gerektirir. Bu, kullanıcının istediği ile tam olarak aynı değildir.
isyan

21

Flexbox'ı kullanmaya hazırsanız, bu sorunu çözmenize yardımcı olacaktır.

.modal-dialog {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

.modal-content {
  margin: 0 auto;
}

7
Bu cevabın benim için harika olduğunu anladım. Kullanıcıların 's zemin tıklayarak bir kalıcı kapatmak izin vermek istiyorum Ancak, eklemek emin olun pointer-events: noneetmek .modal-dialogve pointer-events: autoiçin .modal-content. Becausu .modal-dialog {height: 100%}, bir modun üstündeki ve altındaki tüm sütunu kapsar ve kullanıcıların bu alanın zeminini tıklamasını devre dışı bırakır.
2015'te

@ChingTingWu'dan gelen öneri ile birlikte, en etkili
strider

Ve @ChingTingWu önerisi nerede?
giovannipds

1
ChingTingWu @wuct değişiklik var gibi görünüyor
xiaolin

1
@giovannipds Hata! Etiketlemem daha kısa ve daha kolay olduğu için kullanıcı adımı yeniden adlandırdım. Kafa karıştırıcı için üzgünüm :)
wuct

20

Çözümüm:

.modal.in .modal-dialog 
{
    -webkit-transform: translate(0, calc(50vh - 50%));
    -ms-transform: translate(0, 50vh) translate(0, -50%);
    -o-transform: translate(0, calc(50vh - 50%));
    transform: translate(0, 50vh) translate(0, -50%);
}

Bu Bootstrap 3 ile mükemmel çalışıyor. Neden bu kabul edilen cevap değil? Bu diğerlerinden çok daha basit (4 css yönergeleri).
danielricecodes

@danielricecodes Bir çekim yapacağım ve bunun görüntü alanı birimleriyle ilgili sorunlar nedeniyle olduğunu varsayacağım . . Scooterlord tarafından önerilen cevap, IE9 ve iO'larla bile uyumluluk önerdi, bu da bana bir endişe olduğunu gösteriyor. CanIuse'un sorunlar sayfasını kontrol ederseniz, iO'lar ve IE10 ve daha eski sürümlerle ilgili sorunlar olduğunu göreceksiniz. Kabul ediyorum ya da değil, doğru cevap bu. Sadece neden işaret ediyorum belki bu cevap olarak seçilmemiştir.
Malavos

1
Bu yaklaşımla ilgili bir sorun var,
modalın

Bu kabul edilen cevap olmalı. Şimdiye kadar benim için tek çözüm bu. Bunun için teşekkürler.
shifu

Kalıcı içeriğiniz ekran yüksekliğinden daha büyükse bu işe yaramaz (
kipiniz

18

Benim durumumda yaptığım tek şey, modalın yüksekliğini bilerek css'imde Top ayarlamak

<div id="myModal" class="modal fade"> ... </div>

CSS'imde ayarladım

#myModal{
    height: 400px;
    top: calc(50% - 200px) !important;
}

1
Css için bir noob olarak, bu cevap en az korkutucu görünüyordu ve işi
Oded Ben Dov

2
Bu, sorunun ilk kısmına cevap vermez: ".. kipin tam yüksekliğini bilmediğinizde?"
natec

15

Bu basit css eklemek de işe yarıyor.

.modal-dialog {
  height: 100vh !important;
  display: flex;
}

.modal-content {
  margin: auto !important;
  height: fit-content !important;
}

Uygun içerik nedir?
Marc Roussel

12

Css kullanarak bunu yapmanın en kolay yolu var:

.modal-dialog {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width:500px;
    height:300px;
}

Bu kadar. Yalnızca .modal-dialogdiv div'e uygulanması gerektiğine dikkat edin .

Demo: https://jsfiddle.net/darioferrer/0ueu4dmy/


7
Sabit genişlik ve yükseklik nedeniyle mobil cihazlarda duyarlı değildir.
ianstigator

Cevabınız her cihazın aynı ekran çözünürlüğüne sahip olduğunu varsayar
Patricio Rossi

Adam yok. Bu örneği anladığınızı ve her duruma uyarlayabileceğinizi varsayıyorum.
Dario Ferrer

Bootstrap
v3.3.0'da

11

@ Finik'in mükemmel cevabına genişleyen bu düzeltme yalnızca mobil olmayan cihazlara uygulanır. IE8, Chrome ve Firefox 22'de test ettim - çok uzun veya kısa içerikle çalışıyor.

.modal {
  text-align: center;
}
@media screen and (min-device-width: 768px) {
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

8

Yazdığım en evrensel çözüm. Dinamik olarak iletişim yüksekliği ile hesaplanır. (Sonraki adım, pencerelerin yeniden boyutlandırılmasında iletişim kutularının yüksekliğinin yeniden hesaplanması olabilir.)

JSfiddle: http://jsfiddle.net/8Fvg9/3/

// initialise on document ready
jQuery(document).ready(function ($) {
    'use strict';

    // CENTERED MODALS
    // phase one - store every dialog's height
    $('.modal').each(function () {
        var t = $(this),
            d = t.find('.modal-dialog'),
            fadeClass = (t.is('.fade') ? 'fade' : '');
        // render dialog
        t.removeClass('fade')
            .addClass('invisible')
            .css('display', 'block');
        // read and store dialog height
        d.data('height', d.height());
        // hide dialog again
        t.css('display', '')
            .removeClass('invisible')
            .addClass(fadeClass);
    });
    // phase two - set margin-top on every dialog show
    $('.modal').on('show.bs.modal', function () {
        var t = $(this),
            d = t.find('.modal-dialog'),
            dh = d.data('height'),
            w = $(window).width(),
            h = $(window).height();
        // if it is desktop & dialog is lower than viewport
        // (set your own values)
        if (w > 380 && (dh + 60) < h) {
            d.css('margin-top', Math.round(0.96 * (h - dh) / 2));
        } else {
            d.css('margin-top', '');
        }
    });

});

7

Buradan mükemmel çözümü buldum

$(function() {
    function reposition() {
        var modal = $(this),
            dialog = modal.find('.modal-dialog');
        modal.css('display', 'block');

        // Dividing by two centers the modal exactly, but dividing by three 
        // or four works better for larger screens.
        dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
    }
    // Reposition when a modal is shown
    $('.modal').on('show.bs.modal', reposition);
    // Reposition when the window is resized
    $(window).on('resize', function() {
        $('.modal:visible').each(reposition);
    });
});

1
Teşekkür ederim. Tek bir değişiklikle benim için mükemmel: dialog.css ("kenar boşluğu üst", Math.max (0, ($ (belge) .scrollTop () + (($ (pencere) .height () - dialog.height ()) / 2))));
Viacheslav Soldatov

4
$('#myModal').on('shown.bs.modal', function() {
    var initModalHeight = $('#modal-dialog').outerHeight(); //give an id to .mobile-dialog
    var userScreenHeight = $(document).outerHeight();
    if (initModalHeight > userScreenHeight) {
        $('#modal-dialog').css('overflow', 'auto'); //set to overflow if no fit
    } else {
        $('#modal-dialog').css('margin-top', 
        (userScreenHeight / 2) - (initModalHeight/2)); //center it if it does fit
    }
});

Seçiciler üzerinde birkaç tweaks ile bu bir cazibe gibi çalıştı. @$modal = $('.fade.in'); modalBox = @$modal.find('.modal-content'); initModalHeight = modalBox.outerHeight(); userScreenHeight = @$modal.outerHeight()
juliangonzalez

4

İşte oldukça iyi çalışan ve buna dayanan başka bir css yöntemi: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

küstahlık:

.modal {
    height: 100%;

    .modal-dialog {
        top: 50% !important;
        margin-top:0;
        margin-bottom:0;
    }

    //keep proper transitions on fade in
    &.fade .modal-dialog {
        transform: translateY(-100%) !important;
    }
    &.in .modal-dialog {
        transform: translateY(-50%) !important;
    }
}

Diğer transformçözümlerde olduğu gibi, modal kaydırılabilir içeriğe sahip olduğunda sorun ortaya çıkar (pencereye
sığmayacak kadar

3

i feryat bağlantıdan bootstrap3-dialog indirdik ve bootstrap-dialog.js'de açık fonksiyonu değiştirdim

https://github.com/nakupanda/bootstrap3-dialog

kod

open: function () {
            !this.isRealized() && this.realize();
            this.updateClosable();
            //Custom To Vertically centering Bootstrap 
            var $mymodal = this.getModal();
            $mymodal = $mymodal.append('<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center" valign="middle" class="centerModal"></td></tr></table>');
            $mymodal = $mymodal.find(".modal-dialog").appendTo($mymodal.find(".centerModal"));
            //END
            this.getModal().modal('show');
            return this;
        }

css

.centerModal .modal-header{
    text-align:left;
}
.centerModal .modal-body{
    text-align:left;
} 

Orijinal BSDialog kaynağını değiştirmek zorunda kalmadan kendi kodunuzda uygulanabilecek bir değişiklik şunlardır: gist.github.com/mahemoff/8ff6d3782d2da6f9cbb3 (sadece JS'de bazı değişiklikler, ayrıca Kahve'de yazılmış ama fikri anlıyorsunuz).
mahemoff

3

Bu benim için çalışıyor:

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

2

Bunun gibi bir şey deneyin:

.popup__overlay {
    position: fixed;
    left:  0;
    top:  0;
    width: 100%;
    height: 100%;
    z-index: 999;
    text-align: center
    }
.popup {
    display: inline-block;
    vertical-align: middle
    } 

1
Bu oldukça güzel olabilir ama bootstrap modals mutlak, içinde sabit, içinde ve bu ...: /
scooterlord

1
Bu sınıfların Bootstrap / Bootstrap modals ile ne ilgisi var?
lofihelsinki


1

Basit bir yol. Benim için çalış. Thks rensdenobel :) http://jsfiddle.net/rensdenobel/sRmLV/13/

<style>
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}
.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;
}
</style>
<!-- Button trigger modal -->
<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>    

1

window.resizeolayda ve olayda görünür her bir modal için geçerli bir konum belirleyecek başka bir çözüm show.bs.modal:

(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);

1
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);

1

Biraz geç olduğunu biliyorum, ama kalabalığın içinde kaybolmaması için yeni bir cevap ekliyorum. Her yerde olması gerektiği gibi çalışan çapraz masaüstü-mobil tarayıcı çözümüdür.

Sadece modal-dialogbir modal-dialog-wrapsınıfın içine sarılması ve aşağıdaki kod eklerine sahip olması gerekir:

.modal-dialog-wrap {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

.modal-dialog {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.modal-content {
  display: inline-block;
  text-align: left;
}

İletişim kutusu ortalanmaya başlar ve büyük içerik durumunda kaydırma çubuğu görünene kadar dikey olarak büyür.

İşte zevk için çalışan bir keman!

https://jsfiddle.net/v6u82mvu/1/


1

Bu oldukça eskidir ve özellikle Bootstrap 3 kullanarak bir çözüm ister, ancak merak eden herkes için: Bootstrap 4'ten denilen yerleşik bir çözüm var .modal-dialog-centered. Sorun şu: https://github.com/twbs/bootstrap/issues/23638

Yani sadece eklemeniz gerekir v4 kullanarak .modal-dialog-centeredüzere .modal-dialogdikey olarak modal merkezi:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

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

0

Burada bulunan bootstrap-modal eklentisini kullanmayı düşünün - https://github.com/jschr/bootstrap-modal

Eklenti tüm modalarınızı ortalayacak


... ne yazık ki bunu denemişti ama düzgün çalışması olamazdı - en azından benim kodu ile. Herkesin bunu kendi ihtiyaçlarına göre özelleştirmesi gerektiğini düşünüyorum! Yine de cevap için teşekkürler.
scooterlord

0

Merkezleme için, aşırı karmaşık çözümlerle ne olduğunu anlamıyorum. bootstrap zaten sizin için yatay olarak ortalar, bu yüzden bununla uğraşmanıza gerek yoktur. Benim çözüm sadece jQuery kullanarak bir üst kenar boşluğu ayarlanır.

$('#myModal').on('loaded.bs.modal', function() {
    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return (($(window).outerHeight() / 2) - ($(this).outerHeight() / 2));
        }
    });
});

Uzaktan içerik yüklerken loaded.bs.modal olayını kullandım ve shown.ba.modal olayını kullanmak yükseklik hesaplamasının yanlış olmasına neden oluyor. Elbette, duyarlı olması için pencerenin yeniden boyutlandırılması için bir etkinlik ekleyebilirsiniz.


kalıcı yeterince büyükse, sorunlara neden olabilir
scooterlord 26:14

0

Bu kavramı elde etmenin çok çok kolay bir yolu ve flss olarak css tarafından her zaman ekranınızın modunda modal alacaksınız: http://jsfiddle.net/jy0zc2jc/1/

modalcss'yi izleyerek tabloyu sadece sınıf olarak sınıflamanız gerekir :

display:table

ve modal-dialoggibidisplay:table-cell

verilen kemandaki tam çalışma örneğine bakın


Hiç bir modal görmüyorum
ThaDafinser


Modal pencereye
sığmayacak

0

o kadar karmaşık değil.

lütfen şunu deneyin:

$(document).ready(function(){
    var modalId = "#myModal";
    resize: function(){
            var new_margin = Math.ceil(($(window).height() - $(modalId).find('.modal-dialog').height()) / 2);
            $(modalId).find('.modal-dialog').css('margin-top', new_margin + 'px');
    }
    $(window).resize(function(){
        resize();
    });
    $(modalId).on('shown.bs.modal', function(){
        resize();
    });
});

0

Modals merkezleyen bu basit komut dosyasını kullanın.

İsterseniz, yalnızca bazı modals işlevini sınırlamak için özel bir sınıf (.modal yerine ex: .modal.modal-vcenter) ayarlayabilirsiniz.

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

Ayrıca, modalın yatay aralığı için bu CSS düzeltmesini ekleyin; modals üzerinde kaydırma gösteririz, vücut kaydırma Bootstrap tarafından otomatik olarak gizlenir:

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

0

Mobil bitki formunda biraz farklı görünebilir, işte benim kodum.

<div class="modal-container">
  <style>
  .modal-dialog{
    margin-top: 60%;
    width:80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 100%
  }
  @media screen and (orientation:landscape){
    .modal-dialog{
      margin-top: 70;
      width:80%;
      margin-left: 10%;
      margin-right: 10%;
      margin-bottom: 100%
    }
  }
  .modal-body{
    text-align: center;
  }
  .modal-body p{
    margin:14px 0px;
    font-size: 110%;
  }
  .modal-content{
    border-radius: 10px;
  }
  .modal-footer{
    padding:0px;
  }
  .modal-footer a{
    padding: 15px;
  }
  .modal-footer a:nth-child(1){
    border-radius: 0px 0px 0px 10px;
  }
  .modal-footer a:nth-child(2){
    border-radius: 0px 0px 10px 0px;
  }
  </style>
  <h2>Basic Modal Example</h2>
  <div data-toggle="modal" data-target="#myModal">Div for modal</div>
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <p>确定要取消本次订单嘛?</p>
          </div>
          <div class="modal-footer">
            <div class="btn-group btn-group-justified">
              <a href="#" class="btn btn-default" data-dismiss="modal">取消</a>
              <a href="#" class="btn btn-default" data-dismiss="modal">确定</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.