부트 스트랩 4 모달을 사용하고 있으며 이와 같은 UI가 있습니다.
알다시피,질문레이블과질문 추가가 있으며질문 추가를 클릭하면 jQuery를 통해 새 입력 상자를 추가 할 수 있습니다 . 새 질문을 추가하는 방법은 다음과 같습니다.
$(document.body).on("click",".addSingle",function(){
var appendX = '<div class="actionBtn"><div class="BtnIcon removeBtn removeSingle" title="Delete this choice."><svg class="svd-svg-icon" style="width: 16px; height: 16px;"><use xlink:href="#icon-inplaceplus"><symbol viewBox="0 0 12 12" id="icon-inplaceplus"><path d="M11 5H7V1H5v4H1v2h4v4h2V7h4z"></path></symbol></use></svg></div></div>';
$(this).closest(".question_editable").find(".question:first").clone().find("input:text").val("").end().insertAfter($(this).closest(".question_editable").find(".question:last")).append(appendX);
});
이제 문제는 더 많은 질문을 추가하자마자 스크롤을 볼 수 있지만 아래로 스크롤 할 수는 없다는 것입니다. 질문을 더 추가 할 때 UI가 어떻게 표시되는지 보여줍니다.
위에서 볼 수 있듯이 스크롤이 작동하지 않아서질문 추가텍스트를 더 이상 볼 수 없습니다.
이제질문 편집을 클릭하고질문 편집모달을 다시 열면 동일한 모달 코드 만있는 모달 ID 만있는 다른 파일 인 모달 ID가 다릅니다. 이것입니다.
여기질문 편집에서 질문을 추가 할 수 있으며 스크롤도 제대로 작동합니다. 그래서 내 비록 내질문 추가모달에 문제가 있지만질문 추가및질문 편집모달 질문 코드 구조에 대한 내 모달 팝업은 동일합니다.
여기의질문 추가모달 팝업과 같은 코드가 있습니다.
<div class="modal fade" id="questionModal" tabindex="-1" role="dialog" aria-labelledby="questionModal"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modalcustom" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add Question</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form role="form" method="POST" action="" novalidate id="questionModalfrm">
@csrf
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-br-success btn-s-md waves-effect waves-light">Add</button>
<button type="button" class="btn btn-danger btn-s-md waves-effect waves-light" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
다양한 옵션을 시도했습니다 ( 부트 스트랩 모달 문제-스크롤이 비활성화 됨 )
.modal { overflow-y:auto; }
를 추가하여
그러나 그것은 나를 위해 작동하지 않습니다.
여기에서 내질문 수정은 HTML 마크 업 모양입니다.
<div class="modal fade" id="questionModalEdit" tabindex="-1" role="dialog" aria-labelledby="questionModalEdit"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modalcustom" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Question</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form role="form" method="POST" action="" novalidate id="questionModalEditfrm">
@csrf
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-br-success btn-s-md waves-effect waves-light">Save</button>
<button type="button" class="btn btn-danger btn-s-md waves-effect waves-light" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
이 문제를 해결하기 위해 어떻게해야합니까?
- 답변 # 1
- 답변 # 2
다른 사람들이 jsfiddle에서 비슷한 것을 복제하여 문제의 원인을 확인할 수 있다면 도움이 될 것입니다.
시도 할 수있는 한 가지 옵션은 모달이 아닌 "질문"섹션에만 오버플로가 발생하고 예상대로 작동하는지 확인하는 것입니다.
관련 자료
- javascript - nav-tab이 내부에있을 때 부트 스트랩 스크롤 모달이 작동하지 않음
- javascript - jquery - 첫 실행시 ajax 성공 후 hide modal 기능이 작동하지 않음
- Bootstrap V5가 작동하지 않는 myModalshow () 모달 수동 호출 (바닐라 자바 스크립트)
- php - 아약스 콜백 후 증가 카운터가 작동하지 않음
- javascript - jQuery에서 Vanilla JS로 변환 한 후 CSS 전환이 작동하지 않음
- html - 부트 스트랩 4 개의 알약이 한 번 클릭해도 비활성화되지 않음
- Angular 11로 업그레이드 한 후 Angular Material Tooltip이 작동하지 않음
- ios - setVisibleXRangeMaximum을 호출 한 후 Barchart가 예상대로 작동하지 않습니다
- mouse - 로그인 후 Ubuntu 2004 Dell XPS 13 터치 패드가 작동하지 않음
- swift - 씬 델리게이트에서 메인 스토리 보드를 변경 한 후 탐색 컨트롤러가 작동하지 않음
- javascript - 부트 스트랩 팝업 모달 겹치는 페이지 헤더
- java - 조건을 충족해도 작동하지 않는 경우
- iOS에서 모달이 열려있을 때 "react-native-loading-spinner-overlay"가 작동하지 않음
- javascript - 로드 호출을 사용하지 않고 양식을 모달 부트 스트랩 창에 바인딩 할 수 있습니까?
- javascript - 로그인 기능 후 historypush가 작동하지 않습니다
- python - groupby를 적용한 후 pandas reset_index ()가 작동하지 않습니다
- javascript - 자동 완성 데이터는 부트 스트랩 모달에 나타나지 않지만 목록 만 나타납니다
- javascript - 추가 및 편집을위한 하나의 모달 부트 스트랩 - upsert
- jquery : Bootstrap ColorPicker는 동적으로 생성 된 요소에서 작동하지 않습니다
- javascript - 부트 스트랩 모달 열기에서 함수 호출 - nodejs 추가 코드
- javascript : 중첩 Ajax 호출 문제
- javascript : ajax 요청의 게시물 데이터가 작동하지만 PHP는 여전히 정의되지 않은 인덱스를 표시합니다.
- javascript : URL에서 페이지로 이미지를 가져오는 방법
- javascript : 여러 위치에서 호출할 수 있도록 아래 jQuery code를 함수에 작성하는 방법은 무엇입니까?
- c# : JavaScript에서 경로 매개변수를 얻는 방법은 무엇입니까?
- javascript : 문서 내부 경고가 준비된 후에만 작동하는 트리거
- javascript : alert() 함수의 소스 code
- javascript : jquery는 div를 제거하고 애니메이션으로 다음 항목을 다시 정렬합니다.
- javascript : JQuery 및 CSS를 사용한 양식 유효성 검사
- javascript : PHP base_url 함수에 대한 변수 값
알았어 확실하게 질문을 받았지만 모달의 내용을 항상 끝까지 스크롤하려고하는 것 같습니다. JS Scroll API를 사용하면됩니다.
여기서 container는.modal-content
입니다.