Bootstrap 3 ตำแหน่งศูนย์กลางแนวตั้งเป็นกิริยาช่วย


270

นี่เป็นคำถามสองส่วน:

  1. คุณจะวางตำแหน่งคำกริยาในแนวตั้งได้อย่างไรเมื่อคุณไม่ทราบความสูงที่แท้จริงของคำกริยา?

  2. เป็นไปได้หรือไม่ที่จะมีคำกริยาที่กึ่งกลางและล้น: อัตโนมัติในตัวโมดอล แต่เฉพาะถ้าโมดัลมีความสูงเกินความสูงของหน้าจอ

ฉันได้ลองใช้สิ่งนี้:

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

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

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

สิ่งนี้ทำให้ฉันได้ผลลัพธ์ที่ฉันต้องการเมื่อเนื้อหามีขนาดใหญ่กว่าขนาดหน้าจอแนวตั้ง แต่สำหรับเนื้อหาที่เป็นกิริยาช่วยเล็กน้อยมันใช้ไม่ได้


1
@Heiken ด้วยเหตุผลบางอย่างนี้ทำให้ฉันกระโดดลงบนหน้าจอฉันใช้โครเมี่ยม
Sven van den Boogaart

คำตอบ:


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

และปรับระดับ. จางเล็กน้อยเพื่อให้แน่ใจว่าปรากฏขึ้นจากขอบด้านบนของหน้าต่างแทนที่จะเป็นกึ่งกลาง


ฉันกำลังเอาชนะสิ่งนี้โดยไม่ได้ตั้งใจขอบคุณที่ชี้ให้เห็นว่ามันใช้งานได้จริงเบื้องหลัง
Dorian

นี่อาจเป็นวิธีที่ดีที่สุดในการตั้งศูนย์ในแนวตั้งไม่ใช่เพียงแค่ bootstrap modal แต่ทุกอย่างอื่น css-tricks.com/centering-in-the-unknown
Mark S

4
ฉันชี้แจงว่านี่ไม่สามารถทำงานได้ดีบนมือถือ เนื่องจากคำจำกัดความ ": หลังจาก" มีความสูง 100% และสามารถเลื่อนคำกริยาไปที่ด้านล่างของหน้าโดยอัตโนมัติ ฉันเพิ่งแก้ไขการประกาศ. modal {display: flex! สำคัญ;} .modal-dialog {margin: auto} ผู้ใช้ 92.97% ได้รับการสนับสนุนโดยใช้คุณสมบัติ CSS นี้อย่างไรก็ตามสำหรับฝ่ายสนับสนุนทั่วไปสามารถใช้ JavaScript เพื่อตั้งค่าระยะขอบ
Walter Chapilliquen - wZVanG

21
เยี่ยมมาก แต่ฉันแนะนำให้ใช้มากกว่า 768px และตั้งค่าเริ่มต้นไว้ที่มือถือ ตำแหน่งบนสุดเหมาะสำหรับ modals เมื่อความสูงของหน้าจอเล็ก ฉันได้ปรับภาพเคลื่อนไหวเพื่อให้ปรากฏจากตรงกลางนี่คือตัวอย่างการทำงานหากใครต้องการ: codepen.io/anon/pen/zGBpNq
bwitkowicz

วิธีการแก้ปัญหานี้เลื่อนหน้าต่างกิริยาไปทางขวาสำหรับ 2px สาเหตุ: ก่อนองค์ประกอบ แต่สิ่งนี้สามารถแก้ไขได้โดยเพิ่มรหัสเดียวกันสำหรับ: after
Cypher

146

1. คุณสามารถวางตำแหน่งคำกริยาในแนวตั้งตรงกลางเมื่อคุณไม่ทราบความสูงที่แท้จริงของคำกริยา?

ในการที่จะอยู่ตรงกลางของ Bootstrap 3 Modal โดยไม่ต้องประกาศความสูงคุณจะต้องเขียนทับ Bootstrap CSS ก่อนโดยเพิ่มสิ่งนี้ลงในสไตล์ชีทของคุณ:

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

สิ่งนี้จะจัดวางตำแหน่งของกล่องโต้ตอบโมดอลมุมบนซ้ายตรงกลางของหน้าต่าง

เราต้องเพิ่มข้อความค้นหาสื่อนี้มิฉะนั้นขอบซ้ายของคำกริยาจะผิดในอุปกรณ์ขนาดเล็ก:

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

ตอนนี้เราจะต้องปรับตำแหน่งด้วย JavaScript ในการทำเช่นนั้นเราจะให้องค์ประกอบเป็นลบส่วนบนและขอบซ้ายเท่ากับครึ่งหนึ่งของความสูงและความกว้าง ในตัวอย่างนี้เราจะใช้ jQuery เนื่องจากมันมีอยู่ใน Bootstrap

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

อัปเดต (01/10/2015):

เพิ่มในคำตอบของ Finik เครดิตCentering ในที่ไม่รู้จัก

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

สังเกตเห็นว่าระยะขอบติดลบ - ใช่ไหม? สิ่งนี้จะลบพื้นที่ที่เพิ่มโดย inline-block ช่องว่างนั้นทำให้โมดัลข้ามไปที่ด้านล่างของหน้า @media width <768px

2. เป็นไปได้หรือไม่ที่จะมีคำกริยาที่กึ่งกลางและมีความล้น: อัตโนมัติในตัวโมดอล

สิ่งนี้เป็นไปได้โดยให้โมดัล - โอเวอร์โฟลว์ -y: อัตโนมัติและความสูงสูงสุด การทำงานนี้ต้องใช้เวลาอีกเล็กน้อยจึงจะทำงานได้อย่างถูกต้อง เริ่มด้วยการเพิ่มสิ่งนี้ลงในสไตล์ชีทของคุณ:

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

เราจะใช้ jQuery อีกครั้งเพื่อรับความสูงของหน้าต่างและตั้งค่าความสูงสูงสุดของเนื้อหาโมดอลก่อน จากนั้นเราต้องตั้งค่าความสูงสูงสุดของ modal-body โดยการลบ modal-content ด้วย modal-header และ modal-footer:

$('.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: http://cdpn.io/GwvrJ แก้ไข: ฉันขอแนะนำให้ใช้รุ่นที่อัปเดตแทนวิธีการแก้ปัญหาที่ตอบสนองมากขึ้น: http://cdpn.io/mKfCc

อัปเดต (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'));
  }
});

(อัปเดต 30/11/2558 http://cdpn.io/mKfCcพร้อมการแก้ไขด้านบน)


1
คำตอบที่ยอดเยี่ยมและโพสต์! อย่างไรก็ตามสามารถเคลื่อนไหวได้หรือไม่ มันใช้งานได้ดีเมื่อมันปรากฏ แต่สิ่งที่เกี่ยวกับภาพเคลื่อนไหว? ฉันทำงานและไม่สามารถทดสอบได้ atm แต่ฉันกระตือรือร้นที่จะเห็นผลลัพธ์
scooterlord

คุณสามารถเพิ่มคลาสจางในกิริยา ลองดูโซลูชันที่อัปเดตของฉันที่cdpn.io/mKfCc
dimbslmh

แม้ว่าดูเหมือนว่าจะทำงานได้ดีบน codepen แต่ฉันไม่สามารถทำให้มันทำงานได้ในโครงการของฉัน ฉันเดาว่าคุณเพียงแค่ต้องเพิ่มรหัสและไม่ได้แทนที่อะไรใช่มั้ย
scooterlord

1
เฮ้อีกครั้ง! สังเกตเห็นดังต่อไปนี้ เมื่อโมดัลแรกเปิดขึ้นขอบด้านขวาจะผิดจนกว่าคุณจะปรับขนาดหนึ่งครั้ง มีไอ้บนอันนี้ไหม?
scooterlord

1
@bernie ฉันสร้างสกรีนช็อตบน Browserstack ด้วย codepen ของฉันซึ่งมี modal สั้น ๆ ที่เปิดบน document.ready: browserstack.com/scideshows/ / Browserstack ไม่สนับสนุน v9.3.x สำหรับ screenshots (แต่) ฉันคิดว่า สิ่งที่คล้ายกับสิ่งที่คุณอธิบายเกิดขึ้นใน iOS 6.0 (ดูภาพหน้าจอ iPad 3 (6.0) (แนวตั้ง)) อาจเป็นข้อผิดพลาดเก่าที่ส่งคืนใน v9.3.2 หากคุณต้องการคุณสามารถยื่นรายงานข้อผิดพลาดได้ที่forums.developer.apple.com/community/safari-and-web/…
dimbslmh

37

ทางออกของฉัน

.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 ควรใช้ padding-top ระยะขอบจะหยุดการกระทำอย่างใกล้ชิดเมื่อคุณคลิกที่โอเวอร์เลย์
anvd

2
ตั้งค่าระยะขอบด้านบนเป็น 25% ต้องการโมดัลให้สูง 50%
กบฏ

28

มันสามารถแก้ไขได้ด้วย 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);
}

ด้วยคำนำหน้า

.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
สิ่งนี้จะป้องกันไม่ให้ฉากหลังถูกคลิกเนื่องจากความสูง 100vh เป็นเรื่องปกติสำหรับการตั้งค่า "ฉากหลัง:" คงที่ "
ianstigator

สาเหตุนี้จางหายไปจากปัญหาแอนิเมชั่น
Viswanath Lekshmanan

23

ฉันมากับโซลูชัน CSS บริสุทธิ์! มันเป็น css3 ซึ่งหมายความว่า ie8 หรือต่ำกว่านั้นไม่รองรับ แต่นอกเหนือจากนี้มันได้ทำการทดสอบและทำงานบน ios, android, ie9 +, chrome, firefox, desktop safari ..

ฉันใช้ CSS ต่อไปนี้:

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

นี่คือซอ http://codepen.io/anon/pen/Hiskj

.. การเลือกนี้เป็นคำตอบที่ถูกต้องเนื่องจากไม่มีจาวาสคริปต์ที่หนักเป็นพิเศษที่นำเบราว์เซอร์มาที่หัวเข่าในกรณีที่มีมากกว่าหนึ่ง modal


8
จุดรวมของการใช้ JavaScript คือการได้รับความสูงที่ไม่รู้จักของ modal โซลูชันของคุณมีความสูงคงที่ 80% ซึ่งไม่ตอบคำถามของคุณเอง: "คุณจะวางตำแหน่งคำกริยาในแนวตั้งได้อย่างไรเมื่อคุณไม่ทราบความสูงที่แน่นอนของคำกริยา "
dimbslmh

... มิติความสูงถูกตั้งค่าให้ จำกัด ความสูงของคำกริยาสูงสุดเมื่อเปรียบเทียบกับความสูงของหน้าจอ อย่างไรก็ตามร้อยละของการแปลตั้งตามความสูงของเนื้อหา
scooterlord

3
หากคุณต้องการได้รับโซลูชันที่ไม่เปลี่ยนขนาดของกล่อง modal ลองใช้ css solution ต่อไปนี้เช่นกัน: tweaks.klickagent.ch/#30.05.2014_TwitterBootstrapCenterModal
klickagent.ch

ดีมากเช่นกัน อย่างไรก็ตามมันมีวิธีการที่แตกต่างจากวิธีที่ฉันอธิบาย ในกรณีของคุณโมดอลทั้งหมดเลื่อนขึ้นและลงเมื่อในกรณีของฉันองค์ประกอบที่สร้างขึ้นจะถูกสร้างขึ้น แม้ว่าจะดีมาก! ฉันชอบมัน!
scooterlord

สิ่งนี้ต้องการความสูงที่จะตั้งค่า .. ซึ่งไม่ตรงกับที่ผู้ใช้ขอ
กบฏ

21

หากคุณโอเคกับการใช้ flexbox นี่จะช่วยแก้ปัญหาได้

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

.modal-content {
  margin: 0 auto;
}

7
ฉันพบว่าคำตอบนี้ใช้ได้ดีสำหรับฉัน แต่ถ้าคุณต้องการที่จะให้ผู้ใช้ปิดกิริยาโดยคลิกที่มันฉากหลังให้แน่ใจว่าจะเพิ่มpointer-events: noneการ.modal-dialogและการpointer-events: auto .modal-contentBecausu .modal-dialog {height: 100%}ครอบคลุมทั้งคอลัมน์ด้านบนและด้านล่างเป็นกิริยาช่วยและปิดการใช้งานผู้ใช้คลิกที่ฉากหลังในพื้นที่นั้น
ยกเลิก

รวมกับข้อเสนอแนะจาก @ChingTingWu ซึ่งมีประสิทธิภาพมากที่สุด
strider

และข้อเสนอแนะ @ChingTingWu อยู่ที่ไหน
giovannipds

1
ChingTingWu ดูเหมือนจะเปลี่ยนเป็น @wuct
xiaolin

1
@giovannipds โอ๊ะฉันได้เปลี่ยนชื่อผู้ใช้ของฉันแล้วเนื่องจากมีการติดแท็กให้สั้นลงและง่ายขึ้น ขออภัยที่ทำให้สับสน :)
2559

20

ทางออกของฉัน:

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

ดูเหมือนว่าจะทำงานได้อย่างสมบูรณ์แบบกับ Bootstrap 3 ทำไมคำตอบนี้จึงไม่ได้รับการยอมรับ มันง่ายมาก (4 คำสั่ง CSS) กว่าคนอื่น ๆ
danielricecodes

@danielricecodes ฉันจะถ่ายและคิดว่าเป็นเพราะปัญหาเกี่ยวกับหน่วยวิวพอร์ต . คำตอบที่เสนอโดย scooterlord เสนอความเข้ากันได้แม้กับ IE9 และ iO ซึ่งแนะนำให้ฉันเป็นกังวล หากคุณตรวจสอบหน้าปัญหาของ canIuse คุณจะเห็นว่ามีปัญหากับ iOs และ IE10 ขึ้นไป ไม่ใช่ว่าฉันเห็นด้วยหรือไม่ว่านี่คือคำตอบที่ถูกต้อง ฉันแค่ชี้ให้เห็นว่าทำไมคำตอบนี้อาจไม่ถูกเลือก
Malavos

1
มีปัญหาด้วยวิธีนี้ก็คือเมื่อคำกริยามีเนื้อหาเลื่อน (เนื้อหามากกว่าพอดีในหน้าต่าง)
สตีเว่น Pribilinskiy

นี่ควรเป็นคำตอบที่ยอมรับได้ จนถึงตอนนี้เป็นทางออกเดียวสำหรับฉัน ขอบคุณสำหรับสิ่งนี้.
shifu

สิ่งนี้จะไม่ทำงานหากเนื้อหากิริยาของคุณสูงกว่าความสูงของหน้าจอ (หากคำกริยาของคุณต้องเลื่อน)
Brett Gregson

18

ทุกสิ่งที่ฉันทำในกรณีของฉันคือการตั้งค่าสูงสุดใน CSS ของฉันรู้ถึงความสูงของคำกริยา

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

ใน css ของฉันฉันตั้ง

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

1
ในฐานะที่เป็น Noob เพื่อ CSS คำตอบนี้ดูเหมือนน่ากลัวน้อยและได้งานทำ
Oded เบนกราบ

2
นี่ไม่ตอบคำถามแรก: ".. เมื่อคุณไม่ทราบความสูงของคำกริยา?"
natec

15

เพิ่ม CSS ง่าย ๆ นี้ยังใช้งานได้

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

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

เนื้อหาพอดีคืออะไร
Marc Roussel

12

มีวิธีที่ง่ายที่สุดในการทำเช่นนี้โดยใช้ CSS:

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

แค่นั้นแหละ. ขอให้สังเกตว่าจำเป็นต้องใช้กับ.modal-dialogคอนเทนเนอร์ div เท่านั้น

สาธิต: https://jsfiddle.net/darioferrer/0ueu4dmy/


7
ไม่ตอบสนองบนมือถือเนื่องจากความกว้างและความสูงคงที่
ianstigator

คำตอบของคุณสมมติว่าอุปกรณ์ทุกเครื่องมีความละเอียดหน้าจอเดียวกัน
Patricio Rossi

ไม่มีผู้ชาย ฉันถือว่าคุณเข้าใจตัวอย่างนี้และคุณสามารถปรับใช้กับแต่ละกรณีได้
Dario Ferrer

ใน Bootstrap v3.3.0 ทำงานสำเร็จขอขอบคุณ
Amin Ghaderi

11

การขยายคำตอบที่ยอดเยี่ยมของ @ Finik การแก้ไขนี้ใช้กับอุปกรณ์ที่ไม่ใช่มือถือเท่านั้น ฉันทดสอบใน IE8, Chrome และ Firefox 22 - มันทำงานได้กับเนื้อหาที่ยาวหรือสั้นมาก

.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

ทางออกที่เป็นสากลที่สุดที่ฉันเขียน Dynamicaly คำนวณด้วยความสูงของกล่องโต้ตอบ (ขั้นตอนถัดไปอาจคำนวณความสูงของกล่องโต้ตอบบนการปรับขนาดหน้าต่างใหม่)

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

พบทางออกที่สมบูรณ์แบบจากที่นี่

$(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
ขอบคุณ. สมบูรณ์แบบสำหรับฉันด้วยการเปลี่ยนแปลง: dialog.css ("margin-top", Math.max (0, ($ (เอกสาร) .scrollTop () + (($ (หน้าต่าง) .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
    }
});

ด้วยการปรับแต่งสองสามครั้งบนตัวเลือกสิ่งนี้จึงทำงานได้เหมือนมีเสน่ห์ @$modal = $('.fade.in'); modalBox = @$modal.find('.modal-content'); initModalHeight = modalBox.outerHeight(); userScreenHeight = @$modal.outerHeight()
juliangonzalez

4

นี่เป็นวิธีเดียว css อื่น ๆ เท่านั้นที่ทำงานได้ค่อนข้างดีและเป็นไปตามนี้: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

เขื่อง:

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

เช่นเดียวกับtransformวิธีแก้ไขปัญหาอื่น ๆปัญหานี้เกิดขึ้นเมื่อ modal มีเนื้อหาที่เลื่อนได้ (เนื้อหามากกว่าที่พอดีในหน้าต่าง)
Steven Pribilinskiy

3

ฉันได้ดาวน์โหลด bootstrap3-dialog จากลิงค์ร้องและแก้ไขฟังก์ชั่นเปิดใน bootstrap-dialog.js

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

รหัส

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

นี่คือการดัดแปลงที่สามารถนำไปใช้ในรหัสของคุณเองโดยไม่ต้องเปลี่ยนต้นฉบับ BSDialog ต้นฉบับ: gist.github.com/mahemoff/8ff6d3782d2da6f9cbb3 (แค่ปรับเปลี่ยนบางอย่างใน JS แต่คุณยังได้แนวคิด)
mahemoff

3

สิ่งนี้ใช้ได้กับฉัน:

.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

ลองสิ่งนี้:

.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
สิ่งนี้สามารถทำงานได้ค่อนข้างดี แต่รูปแบบ bootstrap นั้นมีค่าสัมบูรณ์ภายในคงที่ภายในนี้และนั่น ... : /
scooterlord

1
คลาสเหล่านี้เกี่ยวข้องกับ Modals Bootstrap / Bootstrap อย่างไร
lofihelsinki

1

คุณอาจต้องการที่จะตรวจสอบวิธีการเก็บรวบรวมนี้สำหรับการแบ่งกึ่งกลางของ div: http://codepen.io/shshaw/full/gEiDt


1
หืมมันบอกว่าใน caveeats ที่คุณต้องประกาศความสูงซึ่งไม่ใช่สิ่งที่ฉันกำลังมองหา
scooterlord

1

วิธีง่ายๆ ทำงานให้ฉัน 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

อีกวิธีหนึ่งที่จะกำหนดตำแหน่งที่ถูกต้องสำหรับแต่ละ modal ที่มองเห็นได้ในwindow.resizeเหตุการณ์และใน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

ฉันรู้ว่ามันสายไปหน่อย แต่ฉันกำลังเพิ่มคำตอบใหม่เพื่อที่จะได้ไม่หลงทางในฝูงชน มันเป็นโซลูชันข้ามเบราว์เซอร์บนเดสก์ท็อป - มือถือที่ทำงานได้ทุกที่ตามที่ควร

มันเพียงแค่ต้องการที่modal-dialogจะถูกห่อในmodal-dialog-wrapชั้นเรียนและต้องมีการเพิ่มรหัสต่อไปนี้:

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

ไดอะล็อกเริ่มต้นที่กึ่งกลางและในกรณีของเนื้อหาขนาดใหญ่มันจะเติบโตในแนวตั้งจนกระทั่งแถบเลื่อนปรากฏขึ้น

นี่คือซอทำหน้าที่เพื่อความสุขของคุณ!

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


1

นี้ค่อนข้างเก่าและโดยเฉพาะถามว่าสำหรับการแก้ปัญหาโดยใช้เงินทุน 3 แต่สำหรับทุกคนที่สงสัยว่า: จากเงินทุนที่ 4 .modal-dialog-centeredมีความเป็นตัวในการแก้ปัญหาที่เรียกว่า นี่คือปัญหา: https://github.com/twbs/bootstrap/issues/23638

ดังนั้นการใช้ v4 คุณเพียงแค่ต้องเพิ่ม.modal-dialog-centeredที่จะ.modal-dialogไปในแนวตั้งศูนย์กิริยา:

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

พิจารณาใช้ปลั๊กอิน bootstrap-modal ที่นี่ - https://github.com/jschr/bootstrap-modal

ปลั๊กอินจะให้โมดัลของคุณทั้งหมดอยู่ตรงกลาง


... โชคไม่ดีที่ฉันได้ลอง แต่ไม่สามารถทำงานได้อย่างถูกต้อง - อย่างน้อยก็ไม่ใช้รหัสของฉัน ฉันเดาว่าทุกคนต้องปรับแต่งสิ่งนี้ตามความต้องการของเขา! ขอบคุณสำหรับการตอบกลับว่า
scooterlord

0

สำหรับจุดศูนย์กลางฉันไม่ได้สิ่งที่มีคำตอบที่ซับซ้อนเกินไป bootstrap จัดวางแนวนอนไว้ตรงกลางสำหรับคุณดังนั้นคุณไม่จำเป็นต้องยุ่งกับเรื่องนี้ โซลูชันของฉันเพิ่งตั้งค่าระยะห่างสูงสุดโดยใช้ jQuery เท่านั้น

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

ฉันใช้เหตุการณ์ load.bs.modal เนื่องจากฉันกำลังโหลดเนื้อหาจากระยะไกลและการใช้เหตุการณ์แสดงเป็น. ba.modal ทำให้การคำนวณความสูงไม่ถูกต้อง แน่นอนคุณสามารถเพิ่มในเหตุการณ์สำหรับหน้าต่างที่ถูกปรับขนาดถ้าคุณต้องการให้ตอบสนองนั้น


หากคำกริยามีขนาดใหญ่พอก็สามารถทำให้เกิดปัญหา
scooterlord

0

วิธีที่ง่ายมาก ๆ ในการบรรลุแนวคิดนี้และคุณจะได้รับ modal เสมอใน moddle ของหน้าจอของคุณโดย css เป็น fllow: http://jsfiddle.net/jy0zc2jc/1/

คุณต้องmodalแสดงคลาสเป็นตารางโดยทำตาม css ต่อไปนี้:

display:table

และmodal-dialogเป็นdisplay:table-cell

ดูตัวอย่างการทำงานเต็มรูปแบบในซอที่ได้รับ


ฉันไม่เห็นคำกริยาที่ทุกคน
ThaDafinser

สิ่งเดียวที่ฉันเห็น (ใน Google Chrome) คือไอคอนกากบาทสีแดงและฉากหลัง
ThaDafinser

ไม่ใช่ scrollabel เมื่อ modal มีเนื้อหามากกว่าที่พอดีในหน้าต่าง
Steven Pribilinskiy

0

มันไม่ซับซ้อนเลย

โปรดลองสิ่งนี้:

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

ใช้สคริปต์ง่าย ๆ นี้ที่กึ่งกลางโมดัล

หากคุณต้องการคุณสามารถตั้งค่าคลาสที่กำหนดเอง (เช่น: .modal.modal-vcenter แทน. modal) เพื่อ จำกัด การทำงานเฉพาะบางรุ่นเท่านั้น

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

นอกจากนี้ยังเพิ่มการแก้ไข CSS นี้สำหรับระยะห่างแนวนอนของ Modal; เราแสดงการเลื่อนบนโมดัลการเลื่อนบอดี้จะถูกซ่อนโดยอัตโนมัติโดย Bootstrap:

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

0

ใน plantform มือถือมันอาจดูแตกต่างกันเล็กน้อยนี่คือรหัสของฉัน

<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>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.