부트 스트랩 모달 문제-스크롤링이 비활성화 됨
모달이 있고 그 모달 안에는 큰 숨겨진 콘텐츠를 표시하는 드롭 다운이 있습니다.
이제 첫 번째 모달 위에 쌓인 다음 모달을 열고 닫으면 아래 모달 스크롤이 비활성화됩니다.
내가 직면 한 문제를 복제하는 단계를 포함하여 전체 예제를 만들었습니다. 여기에서 볼 수 있습니다 .
<!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>입니다. 부트 스트랩은 같은 페이지에서 여러 모달을 지원하지 않습니다 (적어도 BS3까지).
One way to make it work, is to use the hidden.bs.modal event triggered by BS when closing a modal, then check if there is anyother modal open in order to force the modal-open class on the body.
// 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');
}
});
I have found a solution for you. I'm not sure why it doesn't work but just one line code in your CSS will solve the problem. After closing second modal, the first one are getting overflow-y:hidden somehow. Even if its set to auto actually.
You need to rewrite this and set your own declaration in CSS:
#modal_1 {
overflow-y:scroll;
}
Here you have a working DEMO
Edit: wrong link, sorry.
$(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
Follow https://github.com/nakupanda/bootstrap3-dialog/issues/70 add
.modal { overflow: auto !important; }
to your css
First off, multiple open modals are not supported by Bootstrap. See here: Bootstrap Modal docs
Multiple open modals not supported. Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
But, if you must, you can add this bit of CSS in your custom stylesheet, as long as it's included after the main Bootstrap stylesheet:
.modal {
overflow-y:auto;
}
I assume this is because of a bug in twitter bootstrap. It seems to remove the modal-open class from the body even if two modals were open. You can shoe in a test for jQuery's removeClass function and bypass it if there's a modal still open (credit for the base function goes to this answer: 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;
}
})();
I solved the issue by removing data-dismiss="modal" and adding
setTimeout(function(){ $('#myModal2').modal('show') }, 500);
$('#myModal1').modal('hide');
Hope it helps
Add via JQuery the class 'modal-open' to the body. I presume that the scroll works on everything except the modal.
As a comment to the previous responses : adding the overflow property to the modal ( via CSS ) helps but then you will have two scroll bars in the page .
This is also a solution
.modal.fade .modal-dialog{
-webkit-transform: inherit;
}
I have actually figured out a solution for this. You actually need to enable the scrolling for your page body if you are using $('#myModal').hide(); to hide a model. Just write the following line after $('#myModal').hide();:
$('body').attr("style", "overflow:auto")
This will re-enable the scrolling.
For bootstrap 4 I had to add !Important
.modal {
overflow-y: auto !important;
}
If this is not done, it does not work and it is not applied.
This codes solved mine,when second popup closed, my first popup can't scroll any more.
$('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
}
});
If you are using bootstrap3 or 4, make sure you have a class modal-open in html body. I am not sure if this is mandatory, but maybe make sure your z-index of modal-backdrop is cleared.
$('.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");
});
ReferenceURL : https://stackoverflow.com/questions/28077066/bootstrap-modal-issue-scrolling-gets-disabled
'programing' 카테고리의 다른 글
| C #에서 null 값을 int로 설정하는 방법은 무엇입니까? (0) | 2021.01.16 |
|---|---|
| 반응 형 모드에서 마우스 포인터를 표시하는 방법은 무엇입니까? (0) | 2021.01.16 |
| 이미지를 내비게이션 바 제목으로 넣는 방법 (0) | 2021.01.16 |
| SQL 쿼리를 사용하여 쉼표로 구분 된 목록을 만들려면 어떻게합니까? (0) | 2021.01.16 |
| 문자열 인코딩 및 디코딩? (0) | 2021.01.16 |