ตรงกลางหน้าต่าง Modal Bootstrap

ฉันต้องการอยู่ตรงกลางโมดัลของฉันในวิวพอร์ต (กลาง) ฉันพยายามเพิ่มคุณสมบัติ 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);
        }
    })

สิ่งนี้ทำงานได้: http://jsfiddle.net/sRmLV/1140/

มันใช้ผู้ช่วย div และบาง CSS ที่กำหนดเอง ไม่ต้องใช้ javascript หรือ jQuery

HTML (อ้างอิงจากโค้ดตัวอย่างของ Bootstrap )

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

เนื่องจากคำตอบของ gpcola ไม่ได้ผลสำหรับฉันฉันจึงแก้ไขเล็กน้อยดังนั้นจึงใช้ได้ในขณะนี้ ฉันใช้ "margin-top" แทนการแปลง นอกจากนี้ฉันใช้ "แสดง" แทนที่จะเป็น "แสดง" เพราะหลังจากให้การกระโดดในตำแหน่งที่แย่มาก (มองเห็นได้เมื่อคุณเปิดภาพเคลื่อนไหว bootstrap) ตรวจสอบให้แน่ใจว่าได้ตั้งค่าการแสดงผลเป็น "บล็อก" ก่อนการวางตำแหน่งมิฉะนั้น $ dialog.height () จะเป็น 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));

นี่คือสิ่งที่ฉันทำสำหรับแอปของฉัน หากคุณดูที่คลาสต่อไปนี้ในไฟล์ bootstrap.css .modal-dialog จะมีการเว้นระยะห่างเริ่มต้นที่ 10px และหน้าจอ @media และ (min-width: 768px) .modal-dialog มีการเติมด้านบนตั้งไว้ที่ 30px ดังนั้นในไฟล์ css ที่กำหนดเองของฉันฉันตั้งค่าการเติมด้านบนเป็น 15% สำหรับทุกหน้าจอโดยไม่ระบุความกว้างของหน้าจอสื่อบันทึก หวังว่านี่จะช่วยได้

.modal-dialog {
  padding-top: 15%;
}

วิธีที่ดีที่สุดที่ฉันพบสำหรับเบราว์เซอร์ HTML5 ทั้งหมด:

body.modal-open .modal {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal .modal-dialog {
    margin: auto;
}

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

พารามิเตอร์ top กำลังถูกเขียนทับใน. modal.fade.in เพื่อบังคับให้ค่าที่ตั้งไว้ในการประกาศที่กำหนดเองของคุณเพิ่ม!importantคำหลักหลังส่วนบน สิ่งนี้บังคับให้เบราว์เซอร์ใช้ค่านั้นและไม่สนใจค่าอื่นใดสำหรับคำหลัก นี่เป็นข้อเสียเปรียบที่คุณไม่สามารถแทนที่ค่าได้ทุกที่

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

ในฐานะของ Bootstrap 4 คลาสต่อไปนี้ได้รับการเพิ่มเพื่อให้บรรลุสิ่งนี้สำหรับคุณโดยไม่ต้องใช้ JavaScript

modal-dialog-centered

คุณสามารถค้นหาเอกสารของพวกเขาที่นี่

ขอบคุณ vd สำหรับการชี้ให้เห็นว่าคุณต้องเพิ่มทั้ง. mod-dialog-centered ไปที่. mod-dialog เพื่อให้อยู่กึ่งกลางของคำกริยา

สิ่งนี้เหมาะกับฉันอย่างสมบูรณ์แบบ:

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

URL สาธิตสมบูรณ์: https://codepen.io/dimbslmh/full/mKfCc

คุณสามารถใช้ได้:

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

เพื่อจัดให้อยู่กึ่งกลางทั้งในแนวตั้งและแนวนอน

เนื่องจากคำตอบส่วนใหญ่ที่นี่ไม่ทำงานหรือทำงานเพียงบางส่วนเท่านั้น:

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] เพื่อใช้สไตล์เฉพาะกับ modal ที่ใช้งานอยู่ในปัจจุบันแทน modal ทั้งหมด .inน่าจะดี แต่ดูเหมือนว่าจะถูกเพิ่มหลังจากการเปลี่ยนแปลงเสร็จสมบูรณ์ซึ่งสายเกินไปและทำให้การเปลี่ยนผ่านบางครั้งแย่มาก โชคดีที่ดูเหมือนว่า bootstrap จะใช้สไตล์แอททริบิวต์กับ modal เช่นเดียวกับที่มันเริ่มแสดงดังนั้นนี่จึงเป็นบิตแฮ็ค แต่ก็ใช้งานได้

:not([style='display: none;'])ส่วนวิธีแก้ปัญหาบูตไม่ถูกต้องลบแอตทริบิวต์สไตล์และแทนการตั้งค่าการแสดงผลแบบใครเมื่อคุณปิดกล่องโต้ตอบ

คุณสามารถบรรลุศูนย์การจัดตำแหน่งแนวตั้งใน Modal 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/

วิธีที่สะอาดและง่ายที่สุดในการทำเช่นนี้คือใช้ Flexbox! ต่อไปนี้จะจัดแนว Bootstrap 3 เป็นกิริยาช่วยในแนวตั้งตรงกลางของหน้าจอและทำความสะอาดและเรียบง่ายกว่าโซลูชันอื่น ๆ ทั้งหมดที่โพสต์ที่นี่:

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

หมายเหตุ: แม้ว่านี่จะเป็นวิธีที่ง่ายที่สุด แต่อาจไม่เหมาะสำหรับทุกคนเนื่องจากการสนับสนุนเบราว์เซอร์: http://caniuse.com/#feat=flexbox

ดูเหมือน IE (ต่อปกติ) จะล้าหลัง ในกรณีของฉันผลิตภัณฑ์ทั้งหมดที่ฉันพัฒนาเพื่อตัวเองหรือสำหรับลูกค้าคือ IE10 + (มันไม่สมเหตุสมผลนักที่จะลงทุนเวลาในการพัฒนาเพื่อรองรับ IE เวอร์ชันเก่าเมื่อมันสามารถนำมาใช้เพื่อพัฒนาผลิตภัณฑ์และทำให้ MVP ออกเร็วขึ้น) นี่ไม่ใช่ความหรูหราที่ทุกคนมี

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

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

PS - ไซต์นี้ช่วยให้ฉันเข้าใจ flexbox โดยรวมและนำไปใช้กับกรณีการใช้งานใด ๆ : http://flexboxfroggy.com/

แก้ไข: ในกรณีของสอง modals ในหนึ่งหน้านี้ควรใช้กับ. modal.in

ข้อดี:

• เนื้อหา modal สามารถเข้าถึงได้แม้สูงกว่าอุปกรณ์
• ไม่ใช้display:table-cell(นั่นไม่ได้มีไว้สำหรับเค้าโครง)
• ไม่ต้องการการแก้ไขใด ๆ กับ modal Bootstrap 3 ที่เป็นค่าเริ่มต้น markup
• การวางตำแหน่งเป็น CSS บริสุทธิ์ JS ถูกเพิ่มเพื่อปิด modal เมื่อคลิก / แตะด้านล่างและด้านบน
• ฉันรวมคำนำหน้าSCSSสำหรับผู้ใช้gulpหรือ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>

หมายเหตุ : ฉันตั้งใจจะรักษาคำตอบนี้ให้ทันสมัยด้วยข้อมูลจำเพาะล่าสุดของ Bootstrap 3 สำหรับโซลูชัน Bootstrap 4 ให้ดูคำตอบนี้ (สำหรับตอนนี้พวกเขาเหมือนกันมากหรือน้อย แต่ในเวลาที่พวกเขาอาจแตกต่างกัน) หากคุณพบข้อผิดพลาดหรือปัญหาใด ๆ แจ้งให้เราทราบและฉันจะอัปเดต ขอบคุณ

สะอาดไม่มีคำนำหน้าSCSS(สำหรับใช้กับ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);
  }
}

อีกหนึ่งโซลูชัน CSS ไม่ทำงานสำหรับป๊อปอัปที่ใหญ่กว่าพอร์ตมุมมอง

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

ใน.modal-dialogชั้นเรียนการเอาชนะตำแหน่งที่แน่นอน (จากญาติ) และศูนย์กลางเนื้อหาright:0, left: 0

ใน.modal.fade .modal-dialog , .modal.in .modal-dialogการตั้งค่าภาพเคลื่อนไหวการเปลี่ยนแปลงtopมากกว่าในการแปล

margin-topย้ายป๊อปอัพด้านล่างตรงกลางเล็กน้อยในกรณีที่มีป๊อปอัปขนาดเล็กและในกรณีที่ป๊อปอัปยาวโมดอลจะติดกับส่วนหัว ด้วยเหตุนี้margin-top:0, margin-bottom:0

จำเป็นต้องปรับแต่งเพิ่มเติม

สำหรับผู้ที่ใช้ bootstrap angular-ui สามารถเพิ่มคลาสด้านล่างตามข้อมูลข้างต้น:

หมายเหตุ: ไม่จำเป็นต้องมีการเปลี่ยนแปลงอื่น ๆ และมันจะแก้ไข modal ทั้งหมด

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

ไม่จำเป็นสำหรับเรา javascript Boostrap modal เพิ่ม. in class เมื่อมันปรากฏขึ้น เพียงแค่ปรับเปลี่ยนการรวมคลาสนี้กับ modalclassName.fade.in ด้วย flex css และเสร็จแล้ว

เพิ่ม CSS นี้เพื่อให้ศูนย์โมดัลของคุณอยู่ในแนวตั้งและแนวนอน

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

ตัวเลือกของฉัน CSS เล็ก ๆ น้อย ๆ : (ไม่ทำงานใน 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;
}

คุณสามารถเล่นกับกฎข้อแรกเพื่อเปลี่ยนลักษณะที่เป็นกิริยาช่วย

การใช้: Bootstrap 3.3.4

เพียงแค่เพิ่ม CSS ต่อไปนี้ให้กับคุณมันใช้ได้ดีสำหรับฉัน

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

ตามคำตอบของ Aranyแต่ยังรวมถึงการเลื่อนหน้า

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

ฉันคิดว่านี่เป็นวิธีแก้ปัญหา CSS บริสุทธิ์ที่บริสุทธิ์กว่าโซลูชันของ Rens de Nobel นอกจากนี้สิ่งนี้ไม่ได้ป้องกันไม่ให้ปิดกล่องโต้ตอบโดยคลิกที่ด้านนอก

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

เพียงเพิ่มบางคลาส CSS ลงในคอนเทนเนอร์ DIV ด้วยคลาส .modal-dialog

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.centered container นี้ถูกแก้ไขและอยู่ในตำแหน่งที่เหมาะสม

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

ใช้งานได้ใน BS3 ไม่ได้ทดสอบใน v2 มันจัดกึ่งกลางกิริยาในแนวตั้ง โปรดทราบว่ามันจะมีการเปลี่ยนแปลง - หากคุณต้องการให้มันปรากฏในตำแหน่งแก้ไขtransitionคุณสมบัติCSS สำหรับ.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);
});

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

นี่ใช้คำตอบของ Arany และทำให้ใช้งานได้หาก modal สูงกว่าความสูงของหน้าจอ:

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

ในการเพิ่มโมดอลกึ่งกลางแนวตั้งลงใน bootstrap modal.js ฉันได้เพิ่มสิ่งนี้ไว้ที่ส่วนท้ายของModal.prototype.showฟังก์ชัน:

var $modalDialog = $('.modal-dialog'),
        modalHeight = $modalDialog.height(),
        browserHeight = window.innerHeight;

    $modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2});

เมื่อต้องการทำให้เป็นโมฆะจัดกลางโต้ตอบทั้งหมด

/* บันทึก:

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

2. เพื่อหลีกเลี่ยงการอยู่ตรงกลางของ modal บางตัวไม่ว่าจะเป็นศูนย์กลางคุณสามารถใช้: ไม่ใช่ตัวเลือกในเหตุการณ์คลิก

* /

 $( "[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);
  });

จาก Milan Pandya

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

ถ้าคุณต้องการคุณสามารถตั้งค่าคลาสแบบกำหนดเอง (เช่น: .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 fix นี้สำหรับระยะห่างแนวนอนของ modal เราแสดงการเลื่อนบนโมดัลการเลื่อนบอดี้จะถูกซ่อนโดยอัตโนมัติโดย Bootstrap:

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

คำตอบ CSS อื่นสำหรับคำถามนี้ ...
โซลูชันนี้ใช้ CSS เท่านั้นเพื่อให้ได้ผลตามที่ต้องการในขณะที่ยังคงความสามารถในการปิด modal โดยคลิกที่ด้านนอก นอกจากนี้ยังช่วยให้คุณสามารถตั้งค่า.modal-contentความสูงและความกว้างสูงสุดเพื่อให้ป๊อปอัปของคุณไม่เติบโตเกินกว่าวิวพอร์ต การเลื่อนจะปรากฏขึ้นโดยอัตโนมัติเมื่อเนื้อหามีขนาดใหญ่เกินขนาดกิริยา

หมายเหตุ:
Bootstrap ที่แนะนำ.modal-dialog divควรถูกละเว้นเพื่อให้การทำงานเป็นไปอย่างถูกต้อง (ดูเหมือนจะไม่ผิดเพี้ยน) ทดสอบใน Chrome 51 และ 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%);
}

แก้ไข:.modal-dialogชั้นช่วยให้คุณสามารถเลือกหรือไม่ที่ผู้ใช้สามารถปิดกิริยาโดยคลิกที่ด้านนอกของกิริยาของตัวเอง modals ส่วนใหญ่มีปุ่ม 'ปิด' หรือ 'ยกเลิก' ที่ชัดเจน โปรดระลึกไว้เสมอเมื่อใช้วิธีแก้ปัญหานี้

ทางออกที่ดีที่สุดในการรวมศูนย์ modal ของคุณด้วยความกว้างและความสูงคือใน css add และใน modal เพิ่ม 'centralize' นี้เป็นคลาส ..

.centralize{
   position:absolute;
   left:50%;
   top:50%;

   background-color:#fff;
   transform: translate(-50%, -50%);
   width: 40%; //specify watever u want
   height: 50%;
   }

กึ่งกลางในแนวตั้ง เพิ่ม. modal-dialog-centered to .modal-dialog เพื่อให้อยู่กึ่งกลางกิริยา

เรียกใช้งานโมเดอร์สาธิต

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