콘텐츠에 따라 Twitter Bootstrap 모달의 크기를 동적으로 조정하는 방법
Youtube 비디오, Vimeo 비디오, 텍스트, Imgur 사진 등과 같은 다양한 유형의 데이터가있는 데이터베이스 콘텐츠가 있습니다. 모두 높이와 너비가 다릅니다. 인터넷을 검색하는 동안 내가 찾은 것은 크기를 하나의 매개 변수로만 변경하는 것뿐입니다. 팝업의 내용과 동일해야합니다.
이것은 내 HTML 코드입니다. 또한 Ajax를 사용하여 콘텐츠를 호출합니다.
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="ModalLabel"></h3>
</div>
<div class="modal-body">
</div>
</div>
콘텐츠는 동적이어야하므로 show기본 사양을 재정의하는 모달의 크기를 조정하는 모달의 이벤트 에서 모달의 CSS 속성을 동적으로 설정할 수 있습니다 . 부트 스트랩이되는 이유는 아래와 같이 CSS 규칙을 사용하여 모달 본문에 최대 높이를 적용합니다.
.modal-body {
position: relative;
overflow-y: auto;
max-height: 400px;
padding: 15px;
}
따라서 jquery css메서드를 사용하여 인라인 스타일을 동적으로 추가 할 수 있습니다 .
최신 버전의 부트 스트랩 사용 show.bs.modal
$('#modal').on('show.bs.modal', function () {
$(this).find('.modal-body').css({
width:'auto', //probably not needed
height:'auto', //probably not needed
'max-height':'100%'
});
});
이전 버전의 부트 스트랩 사용 show
$('#modal').on('show', function () {
$(this).find('.modal-body').css({
width:'auto', //probably not needed
height:'auto', //probably not needed
'max-height':'100%'
});
});
또는 css 규칙을 사용하여 재정의 :
.autoModal.modal .modal-body{
max-height: 100%;
}
이 클래스 autoModal를 대상 모달에 추가하십시오 .
바이올린에서 콘텐츠를 동적으로 변경하면 그에 따라 모달 크기가 조정되는 것을 볼 수 있습니다. Demo
최신 버전의 부트 스트랩은 사용 가능한 event names.
- show.bs.modal 이 이벤트는 show 인스턴스 메서드가 호출 될 때 즉시 발생합니다. 클릭에 의해 발생한 경우 클릭 된 요소는 이벤트의 relatedTarget 속성으로 사용할 수 있습니다.
- shown.bs.modal 이 이벤트는 모달이 사용자에게 표시되면 시작됩니다 (CSS 전환이 완료 될 때까지 기다립니다). 클릭에 의해 발생한 경우 클릭 된 요소는 이벤트의 relatedTarget 속성으로 사용할 수 있습니다.
- hide.bs.modal 이 이벤트는 hide 인스턴스 메서드가 호출되면 즉시 시작됩니다.
- hidden.bs.modal 이 이벤트는 모달이 사용자에게 숨겨 졌을 때 시작됩니다 (CSS 전환이 완료 될 때까지 기다립니다).
- loaded.bs.modal 이 이벤트는 모달이 원격 옵션을 사용하여 콘텐츠를로드하면 시작됩니다.
이전 버전의 부트 스트랩이 modal events 지원됩니다.
- Show- 이 이벤트는 show 인스턴스 메서드가 호출 될 때 즉시 발생합니다.
- shown- 이 이벤트는 모달이 사용자에게 표시되면 시작됩니다 (css 전환이 완료 될 때까지 기다립니다).
- hide- 이 이벤트는 hide 인스턴스 메서드가 호출되면 즉시 시작됩니다.
- hidden - This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).
This worked for me, none of the above worked.
.modal-dialog{
position: relative;
display: table; /* This is important */
overflow-y: auto;
overflow-x: auto;
width: auto;
min-width: 300px;
}
I couldn't get PSL's answer working for me so I found all I have to do is set the div holding the modal content with style="display: table;". The modal content itself says how big it wants to be and the modal accommodates it.
for bootstrap 3 use like
$('#myModal').on('hidden.bs.modal', function () {
// do something…
})
There are many ways to do this if you want to write css then add following
.modal-dialog{
display: table
}
In case if you want to add inline
<div class="modal-dialog" style="display:table;">
//enter code here
</div>
Don't add display:table; to modal-content class. it done your job but disposition your modal for large size see following screenshots. first image is if you add style to modal-dialog 
if you add style to modal-content. it looks dispositioned. 
Simple Css work for me
.modal-dialog {
max-width : 100% ;
}
You can do that if you use jquery dialog plugin from gijgo.com and set the width to auto.
$("#dialog").dialog({
uiLibrary: 'bootstrap',
width: 'auto'
});<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css">
<script src="http://code.gijgo.com/1.0.0/js/gijgo.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="dialog" title="Wikipedia">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="320"/>
</div>
</body>
</html>You can also allow the users to control the size if you set resizable to true. You can see a demo about this at http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable
I simply override the css:
.modal-dialog {
max-width: 1000px;
}
A simple CSS solution that will vertically and horizontally center the modal:
.modal.show {
display: flex !important;
justify-content: center;
}
.modal-dialog {
align-self: center;
}
For Bootstrap 2 Auto adjust model height dynamically
//Auto adjust modal height on open
$('#modal').on('shown',function(){
var offset = 0;
$(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;');
});
I had the same problem with bootstrap 3 and the modal-body div's height not wanting to be greater than 442px. This was all the css needed to fix it in my case:
.modal-body {
overflow-y: auto;
}
Mine Solution was just to add below style. <div class="modal-body" style="clear: both;overflow: hidden;">
set width:fit-content on the modal div.
As of Bootstrap 4 - it has a style of:
@media (min-width: 576px)
.modal-dialog {
max-width: 500px;
}
so if you are looking to resize the modal width to some-width larger, I would suggest using this in your css for example:
.modal-dialog { max-width: 87vw; }
Note that setting width: 87vw; will not override bootstrap's max-width: 500px;.
'IT story' 카테고리의 다른 글
| Maven을 덜 장황하게 만들 수 있습니까? (0) | 2020.08.28 |
|---|---|
| iPhone 방향을 설정하는 문서화 된 방법이 있습니까? (0) | 2020.08.28 |
| iPhone OS : 특정 날짜에 대한 NSDate를 어떻게 생성합니까? (0) | 2020.08.27 |
| PostgreSQL 8.4에서 기존 * .sql 파일을 가져 오는 방법은 무엇입니까? (0) | 2020.08.27 |
| 그림자가있는 사용자 정의 ImageView (0) | 2020.08.27 |