부트스트랩 모달 문제 - 스크롤 사용 안 함
저는 모달을 가지고 있고, 그 모달 안에는 큰 숨겨진 콘텐츠를 표시하는 드롭다운이 있는데, 이것은 작동하고 있습니다.
이제 첫 번째 모달 위에 쌓인 다음 모달을 열고 해제하면 아래 모달에서 스크롤이 비활성화됩니다.
당면한 문제를 복제하기 위한 단계를 포함하여 전체 사례를 작성했습니다.여기서 보실 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<title></title>
<style>
</style>
</head>
<body>
<input type="button" data-toggle="modal" data-target="#modal_1" class="btn btn-lg btn-primary" value="Open Modal 1" >
<div class="modal fade" id="modal_1">
<div class="modal-dialog modal-sm">
<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">First Modal</h4>
</div>
<div class="modal-body">
<form class="form">
<div class="form-group">
<label>1) Open This First: </label>
<input type="button" data-toggle="modal" data-target="#modal_2" class="btn btn-primary" value="Open Modal 2" >
</div>
<div class="form-group">
<label>2) Change this once you have opened the modal above.</label>
<select id="change" class="form-control">
<option value="small">Show Small Content</option>
<option value="large">Show Large Content</option>
</select>
</div>
<div id="large" class='content-div'>
<label>Large Textarea Content.. Try and scroll to the bottom..</label>
<textarea rows="30" class="form-control"></textarea>
</div>
<div id="small" class='content-div'>
<label> Example Text Box</label>
<input type="text" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal_2">
<div class="modal-dialog modal-sm">
<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">Second Modal</h4>
</div>
<div class="modal-body">
<hp>This is the stacked modal.. Close this modal, then chenge the dropdown menu, you cannot scroll... </h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$(".content-div").hide();
$("#change").change(function() {
$(".content-div").hide();
$("#" + $(this).val()).show();
});
});
</script>
</html>
다음은 실제 행동을 보여주는 Bootply입니다.
이것도 해결책입니다.
.modal {
overflow-y:auto;
}
http://www.bootply.com/LZBqdq2jl5
자동은 정상적으로 작동합니다 :) 이것은 실제로 당신의 화면 크기보다 더 높은 모달을 수정할 것입니다.
모달이 입니다.modal-open<body>tag.페이지에서 까지는).tag. 부트스트랩은 한 페이지에서 여러 개의 모드를 지원하지 않습니다(적어도 BS3까지는).
작동하는 한 가지 방법은 다음을 사용하는 것입니다.hidden.bs.modal때, "Modal"을 다른 있는지 합니다.modal-open신체의 계급
// Hack to enable multiple modals by making sure the .modal-open class
// is set to the <body> when there is at least one modal open left
$('body').on('hidden.bs.modal', function () {
if($('.modal.in').length > 0)
{
$('body').addClass('modal-open');
}
});
당신을 위한 해결책을 찾았습니다.왜 작동하지 않는지는 잘 모르겠지만 당신의 CSS에 있는 라인 코드 하나만 있으면 문제가 해결됩니다.모달을 후 첫 모달은 두 번 모 을 닫 후 번 첫 모 달 은 째 은 달 째 모 은 ▁after ▁getting 달 , 번 ▁are 째 ▁second ▁the ▁modaloverflow-y:hidden어떻게든.로 설정되어 있더라도auto정말로.
당신은 이것을 다시 쓰고 CSS로 당신 자신의 선언을 설정해야 합니다.
#modal_1 {
overflow-y:scroll;
}
여기 작업 데모가 있습니다.
편집: 잘못된 링크입니다. 죄송합니다.
$(document).ready(function () {
$('.modal').on("hidden.bs.modal", function (e) { //fire on closing modal box
if ($('.modal:visible').length) { // check whether parent modal is opend after child modal close
$('body').addClass('modal-open'); // if open mean length is 1 then add a bootstrap css class to body of the page
}
});
});
//this code segment will activate parent modal dialog
//after child modal box close then scroll problem will automatically fixed
부트스트랩 4를 위해 추가해야 했습니다!중요한
.modal {
overflow-y: auto !important;
}
이렇게 하지 않으면 작동하지 않고 적용되지 않습니다.
https://github.com/nakupanda/bootstrap3-dialog/issues/70 을 팔로우합니다.
.modal { overflow: auto !important; }
당신의 지지자들에게
부트스트랩이 동시에 여러 모달을 지원하지 않았습니다.그것은 부트스트랩 버그입니다.BS4에 대한 아래 스크립트를 추가하면 됩니다.
$('body').on('hidden.bs.modal', function () {
if($('.modal.show').length > 0)
{
$('body').addClass('modal-open');
}
});
$('.modal').css('overflow-y', 'auto');
먼저, 부트스트랩에서는 여러 개의 개방형 모델이 지원되지 않습니다.참고 항목: 부트스트랩 모달 문서
여러 개의 열린 모델이 지원되지 않습니다.다른 모달이 계속 표시되는 동안 모달을 열지 마십시오.한 번에 둘 이상의 모달을 표시하려면 사용자 지정 코드가 필요합니다.
그러나 필요한 경우 기본 부트스트랩 스타일시트 다음에 포함되는 한 이 CSS 비트를 사용자 정의 스타일시트에 추가할 수 있습니다.
.modal {
overflow-y:auto;
}
제거하여 문제를 해결했습니다.data-dismiss="modal" 가추를 합니다.
setTimeout(function(){ $('#myModal2').modal('show') }, 500);
$('#myModal1').modal('hide');
도움이 되길 바랍니다.
이것은 트위터 부트스트랩의 버그 때문인 것 같습니다.그것은 그것을 제거하는 것처럼 보입니다.modal-open두 개의 모델이 열려 있더라도 본문에서 클래스.의 jQuery에 대한 을 신을 수 .removeClass아직 열려 있는 모달이 있으면 기능하고 우회합니다(기본 기능에 대한 크레딧은 다음 답변으로 이동합니다: https://stackoverflow.com/a/1950199/854246) .
(function(){
var originalRemoveClassMethod = jQuery.fn.removeClass;
jQuery.fn.removeClass = function(){
if (arguments[0] === 'modal-open' && jQuery('.modal.in').length > 1) {
return this;
}
var result = originalRemoveClassMethod.apply( this, arguments );
return result;
}
})();
이 코드는 내 코드를 해결했습니다. 두 번째 팝업이 닫혔을 때 첫 번째 팝업은 더 이상 스크롤할 수 없습니다.
$('body').on('hidden.bs.modal', '#SecondModal', function (e) {
if ($('#FirstModal').is(':visible')) { // check if first modal open
$('body').addClass('modal-open'); // re-add class 'modal-open' to the body because it was removed when we close the second modal
$('#FirstModal').focus(); // Focus first modal to activate scrollbar
}
});
일종의 해킹이지만, 저는 이상한/불필요한 행동을 없애기 위해 모달에 가깝게 그것을 닫았다가 다시 열고 싶습니다.페이드를 해제한 경우 페이드가 닫혔다가 다시 열리는 것을 볼 수 없습니다.
var $ModalThatWasOnTop= $('#ModalThatWasOnTop')
$ModalThatWasOnTop.on('hidden.bs.modal', function(e) {
console.log('closing modal that was on top of the other modal')
$('#ModalThatWasCovered').modal('hide');
$('#ModalThatWasCovered').modal('show');
});
당신이 열려고 하는 구성 요소 코드를 모달에 넣는 것은 저에게 효과가 있습니다.한번 보세요.
host: {
'[style.display]': '"flex"',
'[style.flex-direction]': '"column"',
'[style.overflow]': '"auto"'
}
쉬워요
.modal { overflow-y: auto !important; }
부트스트랩 5에서 이 문제를 발견했습니다.부트스트랩 5가 jQuery에서 멀어지기 때문에 여러 모달을 열고 신체 요소 스크롤이 비활성화될 때 해결책이 있습니다.이벤트는 https://getbootstrap.com/docs/5.0/components/modal/ #http://; 에서 확인할 수 있습니다.
document.querySelector('body').addEventListener('hidden.bs.modal', (event) => {
// remove the overflow: hidden and padding-right: 15px
document.querySelector('body').removeAttribute('style');
});한 모달에서 다른 모달을 여는 경우 다음을 사용할 수 있습니다.
$('#myModal').on('hidden.bs.modal', function () {
// Load up a new modal...
$('#myModalNew').modal('show')
})
JQuery를 통해 'modal-open' 클래스를 본문에 추가합니다.저는 그 두루마리가 모달을 제외한 모든 것에 효과가 있다고 생각합니다.
이전 응답에 대한 설명으로, 오버플로 속성을 (CSS를 통해) 모달에 추가하는 것이 도움이 되지만, 그러면 페이지에 두 개의 스크롤 막대가 있습니다.
이것도 해결책입니다.
.modal.fade .modal-dialog{
-webkit-transform: inherit;
}
저는 실제로 이것에 대한 해결책을 생각해냈습니다.사용 중인 경우 실제로 페이지 본문에 대해 스크롤을 활성화해야 합니다.$('#myModal').hide();모델을 숨깁니다. 뒤에 다음 줄을 .$('#myModal').hide();:
$('body').attr("style", "overflow:auto")
이렇게 하면 스크롤이 다시 활성화됩니다.
부트스트랩 3 또는 4를 사용하는 경우 HTML 본문에 클래스 모달오픈이 있는지 확인합니다.이것이 필수인지는 잘 모르겠지만, 모달 백드롭의 z 인덱스가 지워졌는지 확인하십시오.
$('.your-second-modal').on('hidden.bs.modal', function (e) {
$('.your-second-modal').css('z-index', "");
$('.modal-backdrop').css('z-index', 1040);
$('body').addClass("modal-open");
});
아래에 Js 코드를 추가합니다.
$(document).on("click",".modal",function () {
if(!$("body").hasClass('modal-open'))
$("body").addClass('modal-open');
});
de modal-body 컨테이너를 사용하고 있는지 확인하십시오. 이것이 제가 가지고 있던 문제였습니다.
<div class="modal-body">
...
</div>
style.scss의 Angular +2 환경의 경우 다음 클래스를 사용합니다. 마법처럼 작동합니다.
.cdk-overlay-container .cdk-global-overlay-wrapper {
pointer-events: auto !important;
top: 0;
left: 0;
height: 100%;
width: 100%; }
이 CSS 코드를 추가하면 됩니다.
.modal.fade.in {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
모달, 첫 모달, 첫 번째 모달을 닫은에 이렇게 됩니다.id="modal_1" 특성: CSS 성실:overflowY:auto.
당신은 그것을 복구해야 합니다. 그러면 그것은 작동할 것입니다.예를 들어 코드 예제에서 단순 추가:
$(document).on('hidden.bs.modal', '#modal_2',function () {
$('#modal_1').css('overflowY','auto')
});
부트스트랩 모달을 사용하는 경우 이 대신 tabindex="-1"을 제거해야 하는 것보다 간단합니다.
**Paste**언급URL : https://stackoverflow.com/questions/28077066/bootstrap-modal-issue-scrolling-gets-disabled
'programing' 카테고리의 다른 글
| django 템플릿 항목 표시 값 또는 빈 문자열 (0) | 2023.08.29 |
|---|---|
| 도커/오버레이 2/를 청소해도 안전합니까? (0) | 2023.08.29 |
| += 연산자가 VBA에 존재하지 않습니까? (0) | 2023.08.29 |
| Windows에서 tkinter를 pip 또는 easy_install하는 방법 (0) | 2023.08.24 |
| 엑셀 서버측은 어떻게 사용하나요? (0) | 2023.08.24 |