Twitter 부트스트랩 모달의 크기를 콘텐츠에 따라 동적으로 조정하는 방법
유튜브 영상, 비메오 영상, 텍스트, 임구르 사진 등 다양한 종류의 데이터가 있는 데이터베이스 콘텐츠가 있습니다.그것들은 모두 높이와 폭이 다릅니다.인터넷 검색을 하면서 찾은 것은 크기를 하나의 파라미터로 변경하는 것뿐입니다.팝업 내용과 동일해야 합니다.
이것은 나의 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>
이것은 나에게 효과가 있었고, 위의 것들 중 아무 것도 효과가 없었습니다.
.modal-dialog{
position: relative;
display: table; /* This is important */
overflow-y: auto;
overflow-x: auto;
width: auto;
min-width: 300px;
}
컨텐츠가 동적이어야 하므로 모드의 CSS 속성을 동적으로 설정할 수 있습니다.show모달의 기본 사양을 재정의하여 모달의 크기를 조정하는 모달의 이벤트.부트스트랩인 이유는 다음과 같이 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목표 모델에 적용할 수 있습니다.
Fiddle에서 내용을 동적으로 변경하면 그에 따라 modal 크기가 조정되는 것을 볼 수 있습니다.
최신 버전의 부트스트랩은 를 참조하십시오.
- show.bs .jp 이 이벤트는 show instance 메서드가 호출되면 즉시 실행됩니다.클릭으로 인해 발생한 경우 클릭된 요소를 이벤트의 관련 Target 속성으로 사용할 수 있습니다.
- shown.bs .http:// 이 이벤트는 모드가 사용자에게 표시되면 실행됩니다(CSS 전환이 완료될 때까지 기다립니다).클릭으로 인해 발생한 경우 클릭된 요소를 이벤트의 관련 Target 속성으로 사용할 수 있습니다.
- hide.bs .hide 인스턴스 메서드가 호출되면 이 이벤트가 즉시 실행됩니다.
- hidden.bs .http:// 이 이벤트는 모드가 사용자로부터 숨겨지는 것을 완료하면 실행됩니다(CSS 전환이 완료될 때까지 기다립니다).
- loaded.bs .http:// 이 이벤트는 모드가 원격 옵션을 사용하여 컨텐츠를 로드한 경우 실행됩니다.
지원되는 부트스트랩의 이전 버전입니다.
- 표시 - show instance 메서드를 호출하면 이 이벤트가 즉시 실행됩니다.
- 표시된 - 이 이벤트는 모드가 사용자에게 보일 때 발생합니다(CSS 전환이 완료될 때까지 기다립니다).
- hide - hide instance 메서드가 호출되면 이 이벤트가 즉시 실행됩니다.
- hidden - 이 이벤트는 모드가 사용자로부터 숨기기를 완료하면 실행됩니다(CSS 전환이 완료될 때까지 기다립니다).
수 PSL로 있는 를 psl로 .style="display: table;"큰이 그것을 . 모달 내용 자체가 그것이 얼마나 큰 것을 원하며 모달이 그것을 수용하고 있는지를 말해줍니다.
CSS를 작성하고 싶다면 다음을 추가하는 여러 방법이 있습니다.
.modal-dialog{
display: table
}
인라인을 추가하고 싶은 경우
<div class="modal-dialog" style="display:table;">
//enter code here
</div>
추가하지 않음display:table;모드 콘텐츠 클래스로 이동합니다.그것은 당신의 일을 해냈지만 당신의 모달을 큰 사이즈로 배치하는 것은 다음 스크린샷을 참조하세요.첫 번째 이미지는 모달 콘텐츠에 스타일을 추가하는 경우 모달 콘텐츠에 스타일을 추가하는 경우입니다.성향이 있어 보입니다.
부트스트랩 3은 다음과 같이 사용합니다.
$('#myModal').on('hidden.bs.modal', function () {
// do something…
})
간단한 CSS는 나를 위해 작동합니다.
.modal-dialog {
max-width : 100% ;
}
저는 단순히 css를 무시합니다.
.modal-dialog {
max-width: 1000px;
}
③을 width:fit-content모달 디브에서
gijgo.com 의 jquery dialog plugin을 사용하고 너비를 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>크기 조정을 true로 설정한 경우에도 사용자가 크기를 조정할 수 있습니다.이에 대한 데모는 http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable 에서 확인할 수 있습니다.
모드의 중심을 수직과 수평으로 맞추는 간단한 CSS 솔루션:
.modal.show {
display: flex !important;
justify-content: center;
}
.modal-dialog {
align-self: center;
}
부트스트랩 2 모델 높이를 동적으로 자동 조정
//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;');
});
저는 부트스트랩 3과 모달바디디브의 높이가 442px 이상이 되기를 원하지 않는 것에 대해서도 마찬가지로 문제가 있었습니다.이것이 제 경우를 고치는 데 필요한 CSS의 전부였습니다.
.modal-body {
overflow-y: auto;
}
Mine Solution은 아래 스타일을 추가하는 것이었습니다.<div class="modal-body" style="clear: both;overflow: hidden;">
부트스트랩 4의 스타일은 다음과 같습니다.
@media (min-width: 576px)
.modal-dialog {
max-width: 500px;
}
따라서 만약 당신이 모달 폭을 어느 정도 더 큰 폭으로 크기를 조정하고자 한다면, 나는 당신의 CSS에 이것을 사용하는 것을 제안합니다.
.modal-dialog { max-width: 87vw; }
이 설정을 참고합니다.width: 87vw;을다하지를(를) 재정의하지 .max-width: 500px;.
제가 검색한 결과 여기까지 오게 되었으니 2센트짜리 아이디어를 추가하는 것도 좋을 것 같습니다.Monkey friendly Twitter Bootstrap modal을 사용하는 경우 다음과 같은 작업을 수행할 수 있습니다.
var dialog = new BootstrapDialog({
id: 'myDialog',
title: 'Title',
closable: false,
// whatever you like configuration here...
});
dialog.realize();
if (isContentAYoutubeVideo()) {
dialog.getModalDialog().css('width', '80%'); // set the width to whatever you like
}
dialog.open();
도움이 되길 바랍니다.
컨텐츠가 오버플로될 때 모달 상자의 크기만 조정하려면 원래 크기를 그대로 유지합니다.
사용하다
<div class="modal-dialog" style="display:grid;">
대신에
<div class="modal-dialog" style="display:table;">
언급URL : https://stackoverflow.com/questions/16152275/how-to-resize-twitter-bootstrap-modal-dynamically-based-on-the-content
'programing' 카테고리의 다른 글
| PHP에서 MySQL 쿼리의 실행 시간을 얻는 방법은? (0) | 2023.09.18 |
|---|---|
| 지시어 @Inputs에서 대괄호 [ ]를 사용할 때와 사용하지 않을 때는? (0) | 2023.09.18 |
| 파워셸에 선택 문자열이 있는 검색 패턴 제외 (0) | 2023.09.18 |
| 팬더는 행별 최소값을 두 개 이상의 열로 얻습니다. (0) | 2023.09.18 |
| mysql에 빅데이터를 저장하는 방법은? (0) | 2023.09.18 |