부트 스트랩 3 모달 수직 위치 중심
이것은 두 가지 질문입니다.
모달의 정확한 높이를 모르는 경우 어떻게 모달을 중앙에 수직으로 배치 할 수 있습니까?
모달이 화면 높이를 초과하는 경우에만 모달을 중앙에 배치하고 모달 바디에서 overflow : auto를 가질 수 있습니까?
나는 이것을 사용하려고 시도했다.
.modal-dialog {
height: 80% !important;
padding-top:10%;
}
.modal-content {
height: 100% !important;
overflow:visible;
}
.modal-body {
height: 80%;
overflow: auto;
}
이것은 내용이 세로 화면 크기보다 훨씬 클 때 필요한 결과를 제공하지만 작은 모달 내용의 경우 거의 사용할 수 없습니다.
.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;
}
그리고 약간의 .fade 클래스를 조정하여 가운데가 아닌 창의 상단 경계에 표시되도록하십시오.
1. 모달의 정확한 높이를 모르는 경우 어떻게 모달을 중앙에 수직으로 배치 할 수 있습니까?
높이를 선언하지 않고 Bootstrap 3 모달의 중심을 맞추려면 먼저 스타일 시트에 이것을 추가하여 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를 사용합니다.
$('.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의 답변 추가 . 미지의 센터링에 대한 크레딧 .
.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;
}
부정적인 마진이 맞습니까? 인라인 블록으로 추가 된 공간을 제거합니다. 이 공간은 모달이 페이지의 맨 아래 @media width <768px로 점프하게합니다.
2. 모달이 화면 높이를 초과하는 경우에만 모달이 가운데에 있고 모달 바디에 overflow : auto가있을 수 있습니까?
이것은 모달 바디에 overflow-y : auto 및 max-height를 제공함으로써 가능합니다. 제대로 작동하려면 조금 더 많은 작업이 필요합니다. 이것을 스타일 시트에 추가하는 것으로 시작하십시오.
.modal-body {
overflow-y: auto;
}
.modal-footer {
margin-top: 0;
}
jQuery를 다시 사용하여 창 높이를 얻고 모달 컨텐츠의 최대 높이를 먼저 설정합니다. 그런 다음 모달 헤더와 모달 바닥 글로 모달 내용을 빼서 모달 바디의 최대 높이를 설정해야합니다.
$('.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
업데이트 (2015 년 11 월 30 일) :
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'));
}
});
( 위의 편집으로 2015 년 11 월 30 일 http://cdpn.io/mKfCc 업데이트 )
내 솔루션
.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>
간단하게 고칠 수 있습니다 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);
}
나는 순수한 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
.. 모달이 두 개 이상인 경우 브라우저를 무릎으로 가져 오는 여분의 무거운 자바 스크립트가 없으므로 올바른 답변으로 선택하십시오.
flexbox를 사용해도 괜찮다면 문제 해결에 도움이 될 것입니다.
.modal-dialog {
height: 100%;
width: 100%;
display: flex;
align-items: center;
}
.modal-content {
margin: 0 auto;
}
내 해결책 :
.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%);
}
내 경우에 한 일은 모달의 높이를 알고 내 CSS에서 Top을 설정하는 것입니다.
<div id="myModal" class="modal fade"> ... </div>
내 CSS에서 내가 설정
#myModal{
height: 400px;
top: calc(50% - 200px) !important;
}
@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;
}
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/
내가 쓴 가장 보편적 인 솔루션. 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', '');
}
});
});
여기 에서 완벽한 솔루션을 찾았습니다
$(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);
});
});
이 간단한 CSS를 추가해도 작동합니다.
.modal-dialog {
height: 100vh !important;
display: flex;
}
.modal-content {
margin: auto !important;
height: fit-content !important;
}
$('#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
}
});
벨로우즈 링크에서 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;
}
다음은 꽤 잘 작동하고 이것을 기반으로하는 다른 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;
}
}
이것은 나를 위해 작동합니다 :
.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;
}
다음과 같이 해보십시오 :
.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
}
div의 절대 중심을 맞추기 위해이 방법 모음을 확인하고 싶을 수도 있습니다. http://codepen.io/shshaw/full/gEiDt
간단한 방법. 나를 위해 일하십시오. 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">×</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>
window.resize이벤트와 on 에 각각의 보이는 모달에 대해 유효한 위치를 설정하는 또 다른 솔루션 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);
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);
조금 늦었다는 것을 알고 있지만 군중에서 길을 잃지 않도록 새로운 답변을 추가하고 있습니다. 그것은 모든 곳에서 제대로 작동하는 데스크탑 간 모바일 브라우저 솔루션입니다.
그것은 단지 필요 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/
부트 스트랩 모달 플러그인은 여기에서 찾을 사용을 고려 - https://github.com/jschr/bootstrap-modal
플러그인은 모든 모달을 중앙에 배치합니다
센터링의 경우 지나치게 복잡한 솔루션을 얻지 못합니다. 부트 스트랩은 이미 수평으로 중앙에 배치되므로이를 망칠 필요가 없습니다. 내 솔루션은 jQuery를 사용하여 최고 마진을 설정합니다.
$('#myModal').on('loaded.bs.modal', function() {
$(this).find('.modal-dialog').css({
'margin-top': function () {
return (($(window).outerHeight() / 2) - ($(this).outerHeight() / 2));
}
});
});
내용을 원격으로로드 할 때 loaded.bs.modal 이벤트를 사용했으며 shown.ba.modal 이벤트를 사용하면 높이 계산이 잘못됩니다. 반응 형이어야 할 경우 창의 크기를 조정하는 이벤트를 추가 할 수 있습니다.
이 개념을 달성하는 매우 쉬운 방법이며 항상 fls로 CSS로 화면의 모드에서 모달을 얻을 수 있습니다 : http://jsfiddle.net/jy0zc2jc/1/
당신은 modalCSS로 다음과 같이 클래스 표시를해야합니다.
display:table
와 modal-dialog같은display:table-cell
주어진 바이올린에서 전체 작업 예를 참조하십시오
그렇게 복잡하지 않습니다.
이것을 시도하십시오 :
$(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();
});
});
모달을 중심으로하는이 간단한 스크립트를 사용하십시오.
원하는 경우 기능을 일부 모달로만 제한하도록 사용자 정의 클래스 (예 : .modal 대신 .modal.modal-vcenter)를 설정할 수 있습니다.
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 수정 사항을 추가하십시오. 우리는 모달에 스크롤을 표시하고 본문 스크롤은 Bootstrap에 의해 자동으로 숨겨집니다.
/* scroll fixes */
.modal-open .modal {
padding-left: 0px !important;
padding-right: 0px !important;
overflow-y: scroll;
}
모바일 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>
모달 센터를 화면으로 설정
.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://stackoverflow.com/questions/18422223/bootstrap-3-modal-vertical-position-center
'development' 카테고리의 다른 글
| “알 수없는 수업 (0) | 2020.03.31 |
|---|---|
| a2ensite에 대한 사이트 오류가 없습니다 (0) | 2020.03.31 |
| Signtool 오류 : Windows 스토어 앱에서 지정된 모든 기준을 충족하는 인증서를 찾을 수 없습니까? (0) | 2020.03.31 |
| Automapper로 하나의 속성 매핑 무시 (0) | 2020.03.31 |
| Go에서 고정 길이의 임의 문자열을 생성하는 방법은 무엇입니까? (0) | 2020.03.31 |