모달 양식의 크기를 변경하려고하거나 오히려 렌더링하는 내용에 응답해야합니다. 양식을 렌더링하는 데 사용하고 있으며 필요한 경우 스크롤을 처리하는 것을 선호합니다.
내가 렌더링하는 폼에는 아마도 다른 50px가 필요할 것입니다. 단지 버튼이 없습니다.
따라서 application.css.scss 파일 (Rails 3.2 사용)에서 .modal 스타일을 재정의하려고 시도했지만 최대 높이 및 오버플로 편차가 덮어 쓰여진 것 같습니다.
이견있는 사람?
답변:
나는 똑같은 문제를 겪고 있었다.
.modal-body {
max-height: 800px;
}
스크롤 막대가 모달 대화 상자의 본문 섹션에만 표시되는 경우 본문의 최대 높이를 조정해야 함을 의미합니다.
부트 스트랩 3에서 :
.modal-dialog{
width:whatever
}
#modal_ID .modal-dialog { width: 800px }
너비와 높이에 대한 두 가지 방법을 혼합하면 좋은 해킹이 있습니다.
CSS :
#myModal .modal-body {max-height: 800px;}jQuery :
$('myModal').modal('toggle').css({'width': '800px','margin-left': function () {return -($(this).width() / 2);}})이것은 내가 사용하는 것입니다. 너비와 높이에 대한 여백과 스크롤 막대 문제를 수정하지만 내용에 맞게 모달의 크기를 조정하지는 않습니다.
내가 도움이 되었기를 바랍니다!
나는 대답을 얻었습니다 ... 문제는 최대 높이 속성을 덮어 썼고 부트 스트랩 모달은 500px 높이 제한을 초과하여 크기를 조정할 수 있다는 것입니다
".modal-body"height : 100 % 설정하면 콘텐츠에 따라 높이가 자동으로 조정되고 화면에 따라 "최대 높이"가 설정됩니다 ...
size 매개 변수를 사용해 보셨습니까?
return $modal.open({
backdrop: 'static',
size: 'sm',
templateUrl: "app/views/dialogs/error.html",
controller: "errorDialogCtrl",선택적인 크기
모달에는 수정 자 클래스를 통해 .modal-dialog에 배치 할 수있는 두 가지 선택적 크기가 있습니다.
다른 것을 원하면 bootstarp.css를 업데이트하십시오.
@media (min-width: 768px) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
.modal-sm {
width: 300px;
}
.modal-xy { // custom
width: xxxpx;
}
}
@media (min-width: 992px) {
.modal-lg {
width: 900px;
}
}Boostrap> 4의 경우 이것은 나를 위해 일했습니다 :
.modal-content{
width: 1200px;
}더 고급 버전 :
body .modal-content{
width: 160%!important;
margin-left: -30%!important;
}다음은 코드 펜입니다.
위의 몇 가지를 폭과 높이의 특정 크기를 설정해야하며 (모달로 이미지를 표시하기 위해) 위의 어느 것도 도움이되지 않았으므로 스타일을 재정의하기로 결정하고 다음을 기본 <div>에 추가했습니다. class = "modal hide fade in": 즉 모달 배경의 스타일 태그에 너비를 추가했습니다.
style="display: none; width:645px;"그런 다음 다음 'style'태그를 모달 바디에 추가했습니다.
<div class="modal-body" style="height:540px; max-height:540px; width:630px; max-width:630px;">지금은 매력처럼 작동하고 이미지를 표시하고 이제는 완벽하게 맞습니다.
이것은 나를 위해 일했다 :
#modal1 .modal
{
overflow-y: hidden;
}
#modal1 .modal-dialog
{
height: 100%;
overflow-y: hidden;
}내 경우에는 중첩 모달이 있는데 , 중첩 모달 내부에서 컨트롤의 표시를 전환 할 때 각기 다른 높이가 필요한 컨트롤이 있으므로 max : height를 적용 할 수 없으며 대신 height : 100 % 가 잘 작동합니다.
부트 스트랩 모달의 크기를 늘리는 또 다른 간단한 방법은 다음과 같습니다.
$(".modal-dialog").css("width", "80%");모달의 너비는 화면의 백분율로 지정할 수 있습니다. 위의 예제에서 화면 너비의 80 %로 설정했습니다.
아래는 동일한 작업 예입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".modal-dialog").css("width", "90%");
});
</script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>