it-swarm-vi.com

Bootstrap 3 phương thức vị trí trung tâm dọc

Đây là một câu hỏi gồm hai phần:

  1. Làm thế nào bạn có thể định vị phương thức theo chiều dọc ở trung tâm khi bạn không biết chiều cao chính xác của phương thức?

  2. Có thể có chế độ tập trung vào trung tâm và có tràn: tự động trong cơ thể phương thức, nhưng chỉ khi phương thức vượt quá chiều cao màn hình?

Tôi đã thử sử dụng điều này:

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

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

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

Điều này mang lại cho tôi kết quả tôi cần khi nội dung lớn hơn nhiều so với kích thước màn hình dọc, nhưng đối với nội dung phương thức nhỏ thì không thể sử dụng được.

247
scooterlord

Tôi đã đưa ra một giải pháp css tinh khiết! Mặc dù đó là css3, có nghĩa là 8 hoặc thấp hơn không được hỗ trợ, nhưng ngoài điều này, nó đã được thử nghiệm và hoạt động trên ios, Android, eg9 +, chrome, firefox, safari trên máy tính để bàn ..

Tôi đang sử dụng css sau:

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

Đây là một câu đố . http://codepen.io/anon/pen/Hiskj

.. chọn đây là câu trả lời chính xác vì không có javascript nặng nào khiến trình duyệt phải quỳ xuống trong trường hợp có nhiều hơn một phương thức.

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

Và điều chỉnh một chút .fade class để đảm bảo nó xuất hiện ngoài viền trên cùng của cửa sổ, thay vì ở giữa

358
Finik

1. Làm thế nào bạn có thể định vị phương thức theo chiều dọc ở trung tâm khi bạn không biết chính xác chiều cao của phương thức?

Để căn giữa tuyệt đối Bootstrap 3 Phương thức mà không khai báo chiều cao, trước tiên bạn sẽ cần ghi đè lên Bootstrap CSS bằng cách thêm phần này vào biểu định kiểu của bạn:

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

Điều này sẽ định vị các hộp thoại phương thức góc trên cùng bên trái ở giữa cửa sổ.

Chúng tôi phải thêm truy vấn phương tiện này nếu không, lề trái phương thức bị sai trên các thiết bị nhỏ:

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

Bây giờ chúng ta sẽ cần điều chỉnh vị trí của nó với JavaScript. Để làm điều đó, chúng tôi cung cấp cho phần tử một đỉnh âm và lề trái bằng một nửa chiều cao và chiều rộng của nó. Trong ví dụ này, chúng tôi sẽ sử dụng jQuery vì nó có sẵn với 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);
        }
    });
});

Cập nhật (01/10/2015):

Thêm vào câu trả lời của Finik . Tín dụng cho Định tâm trong Không xác định .

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

Chú ý lề âm phải không? Điều này loại bỏ không gian được thêm bởi khối nội tuyến. Không gian đó làm cho phương thức nhảy xuống cuối trang @media width <768px.

2. Có thể có chế độ tập trung vào trung tâm và có tràn: tự động trong cơ thể phương thức, nhưng chỉ khi phương thức vượt quá chiều cao màn hình?

Điều này có thể thực hiện được bằng cách cung cấp cho cơ thể phương thức một overflow-y: auto và max-height. Điều này cần thêm một chút công việc để làm cho nó hoạt động đúng. Bắt đầu với việc thêm phần này vào biểu định kiểu của bạn:

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

Chúng tôi sẽ sử dụng lại jQuery để lấy chiều cao cửa sổ và đặt chiều cao tối đa của nội dung phương thức trước. Sau đó, chúng ta phải đặt chiều cao tối đa của cơ thể phương thức, bằng cách trừ nội dung phương thức với tiêu đề phương thức và chân phương thức:

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

Bạn có thể tìm thấy bản demo hoạt động tại đây với Bootstrap 3.0.3: http://cdpn.io/GwvrJ EDIT: Tôi khuyên bạn nên sử dụng phiên bản cập nhật thay thế cho một giải pháp nhạy hơn: http://cdpn.io/mKfCc

Cập nhật (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'));
  }
});

(Cập nhật ngày 30/11/2015 http://cdpn.io/mKfCc với chỉnh sửa ở trên)

141
dimbslmh

Giải pháp của tôi

.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>
36
Brian J. Hakim

Nó đơn giản có thể được sửa bằng 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);
}

Với tiền tố

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

Nếu bạn ổn với việc sử dụng flexbox thì điều này sẽ giúp giải quyết nó.

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

.modal-content {
  margin: 0 auto;
}
18
xiaolin

Giải pháp của tôi:

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

Tất cả những gì tôi đã làm trong trường hợp của mình là đặt Top trong css của tôi biết chiều cao của phương thức 

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

trong css của tôi, tôi đặt

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

Mở rộng câu trả lời tuyệt vời của @ Finik, cách khắc phục này chỉ được áp dụng cho các thiết bị không dành cho thiết bị di động. Tôi đã thử nghiệm trong IE8, Chrome và Firefox 22 - nó hoạt động với nội dung rất dài hoặc ngắn.

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

Có một cách dễ nhất để làm điều này bằng cách sử dụng css:

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

Đó là nó. Lưu ý rằng chỉ cần áp dụng cho div container .modal-dialog.

Bản trình diễn: https://jsfiddle.net/darioferrer/0ueu4dmy/

11
Dario Ferrer

Giải pháp phổ quát nhất tôi đã viết. Tính năng động tính toán với chiều cao hộp thoại. (Bước tiếp theo có thể là tính toán lại chiều cao của hộp thoại trên thay đổi kích thước cửa sổ.)

Mã nguồn: 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', '');
        }
    });

});
8
Jan Renner

Tìm thấy giải pháp hoàn hảo từ tại đây

$(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);
    });
});
6
Ismail Farooq
$('#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
    }
});
4
Ray Suelzer

tôi đã tải xuống hộp thoại bootstrap3 từ liên kết dưới đây và sửa đổi hàm mở trong bootstrap-hộp.j 

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

Đây là một phương pháp chỉ css khác hoạt động khá tốt và dựa trên điều này: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

sass:

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

Điều này làm việc cho tôi:

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

Thêm css đơn giản này cũng hoạt động.

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

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

Hãy thử một cái gì đó như thế này:

.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
    } 
2
Sergey Briskin

Một cách đơn giản. Làm việc cho tôi. 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
Tuyen Cao

Tôi biết là hơi muộn, nhưng tôi đang thêm một câu trả lời mới để nó không bị lạc trong đám đông. Đó là một giải pháp trình duyệt đa máy tính để bàn di động, hoạt động ở mọi nơi đúng cách.

Nó chỉ cần modal-dialog được bọc bên trong lớp modal-dialog-wrap và cần có các bổ sung mã sau:

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

Hộp thoại bắt đầu tập trung và trong trường hợp nội dung lớn, nó chỉ đơn giản phát triển theo chiều dọc cho đến khi một thanh cuộn xuất hiện.

Đây là một fiddle làm việc cho niềm vui của bạn!

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

1
scooterlord

Bạn có thể muốn kiểm tra bộ sưu tập các phương thức này để định tâm tuyệt đối một div: http://codepen.io/shshaw/full/gEiDt

1
Sevron

còn một giải pháp khác sẽ đặt vị trí hợp lệ cho mỗi phương thức hiển thị trên sự kiện window.resize và trên 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
lenybernard
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
user3477026

Sử dụng tập lệnh đơn giản này tập trung vào các phương thức.

Nếu bạn muốn, bạn có thể đặt một lớp tùy chỉnh (ví dụ: .modal.modal-vcenter thay vì .modal) để giới hạn chức năng chỉ ở một số phương thức.

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

Đồng thời thêm sửa lỗi CSS này cho khoảng cách ngang của phương thức; chúng tôi hiển thị cuộn trên các phương thức, cuộn cơ thể được ẩn tự động bởi Bootstrap:

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

Điều này khá cũ và đặc biệt yêu cầu một giải pháp sử dụng Bootstrap 3, nhưng đối với bất kỳ ai thắc mắc: từ Bootstrap 4 trở đi, có một giải pháp tích hợp có tên .modal-dialog-centered. Đây là vấn đề: https://github.com/twbs/bootstrap/issues/23638

Vì vậy, sử dụng v4, bạn chỉ cần thêm .modal-dialog-centered vào .modal-dialog để căn giữa theo phương thức:

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

Ở dạng di động, nó có thể trông hơi khác một chút, đây là mã của tôi.

<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>
0
Martian2049

Giải pháp đơn giản nhất là thêm các kiểu hộp thoại phương thức vào đầu trang hoặc nhập css với mã này:

<style>
    .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 50%;
    width:40%;
    height:40%;
    }
</style>

Tuyên bố phương thức:

    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">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>

Phương thức sử dụng:

<a data-toggle="modal" data-target="#exampleModalCenter">
 ...
</a>
0
Jackkobec

.modal {
}
.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;
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>

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

CSS:

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

HTML:

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

Tham khảo: http://jsfiddle.net/rensdenobel/sRmLV/13/

0
Ejrr1085

Cách rất dễ dàng để đạt được khái niệm này và bạn sẽ nhận được phương thức luôn ở chế độ màn hình của mình bằng css như fllow: http://jsfiddle.net/jy0zc2jc/1/

bạn phải chỉ hiển thị lớp modal dưới dạng bảng bằng cách làm theo css:

display:table

modal-dialogdisplay:table-cell

xem ví dụ làm việc đầy đủ trong fiddle đã cho

0
Innodel

Đối với trung tâm, tôi không nhận được những gì với các giải pháp quá phức tạp. bootstrap đã định tâm nó theo chiều ngang cho bạn, vì vậy bạn không cần phải loay hoay với điều này. Giải pháp của tôi chỉ là đặt lề trên chỉ bằng jQuery.

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

Tôi đã sử dụng sự kiện load.bs.modal khi tôi đang tải nội dung từ xa và sử dụng sự kiện được hiển thị.ba.modal khiến phép tính chiều cao không chính xác. Tất nhiên bạn có thể thêm vào một sự kiện cho cửa sổ được thay đổi kích thước nếu bạn cần nó đáp ứng.

0
Scott Flack

nó không phức tạp lắm.

vui lòng thử điều này:

$(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
Mr. Sun Lin

Đây là mã phản hồi và cũng mở với kích thước khác nhau trong chế độ xem trên thiết bị di động, vui lòng kiểm tra một lần.

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

.modal:before {
  content: '';
  display: inline-block;
  height: 20%;
  vertical-align: middle;
  margin-right: -4px;
}

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

đặt trung tâm phương thức để sàng lọc

.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;
}
0
Super Model

Cân nhắc sử dụng plugin bootstrap-modal được tìm thấy ở đây - https://github.com/jschr/bootstrap-modal

Plugin sẽ tập trung tất cả các phương thức của bạn

0
Jeremy Lynch