0
문제가 있습니다. 전에는 부트 스트랩 3 모달 창과 함께 본 적이 없었습니다. 부트 스트랩 모달 창을 닫고 다시 열어 마지막으로 닫은 위치를 저장하는지 확인합니다. 일반적으로 다시 열 때마다 스크롤을 재설정하지만 이번에는 다시 스크롤하지 않습니다.스크립트를 올바르게 배치하여 실행할 수있는 위치는 어디입니까?
$(document).ready(function() {
$('#myModal').on('shown.bs.modal', function (e){
$('.modal-content').scrollTop(0);
});
});
내 대답에 대한 해결책이 될 수 있지만, 다시 그것을 실행되지 않습니다 :
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<a title="Close" class="fancybox-item fancybox-close" data-dismiss="modal" aria-label="Close"></a>
<img src="images/sunset1.jpg" alt="me"/>
<h2>Content test</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum erat et neque tincidunt volutpat. Cras eget augue id dui varius pretium. Cras posuere dolor risus. Pellentesque elementum ultricies quam, sit amet rhoncus nisl viverra in. Cras imperdiet nisi a euismod molestie. Ut a metus arcu. Pellentesque feugiat dictum erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum erat et neque tincidunt volutpat. Cras eget augue id dui varius pretium. Cras posuere dolor risus. Pellentesque elementum ultricies quam, sit amet rhoncus nisl viverra in. Cras imperdiet nisi a euismod molestie. Ut a metus arcu. Pellentesque feugiat dictum erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum erat et neque tincidunt volutpat. Cras eget augue id dui varius pretium. Cras posuere dolor risus. Pellentesque elementum ultricies quam, sit amet rhoncus nisl viverra in. Cras imperdiet nisi a euismod molestie. Ut a metus arcu. Pellentesque feugiat dictum erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum erat et neque tincidunt volutpat. Cras eget augue id dui varius pretium. Cras posuere dolor risus. Pellentesque elementum ultricies quam, sit amet rhoncus nisl viverra in. Cras imperdiet nisi a euismod molestie. Ut a metus arcu. Pellentesque feugiat dictum erat.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
$(document).ready 기능을 인식하지만 입력하지 않는다고 분석했습니다. 나도 같은 결과가 발생하는 HTML 페이지의 맨 아래에 넣으려고했는데 마지막으로 모달 아래에서 새 스크립트를 만들어 보았지만
Reference error: $ not defined 메시지를주고 jQuery 뒤에 넣어야한다는 것을 알고 있습니다. 플러그인은 하단에 .. 호출됩니다.
$(document).ready 함수를 제거하면 모든 경우에 모달 함수가 인식되지만 계속 실행되지는 않습니다. 이 함수를 작동시키는 방법에 관해서는 꽤 많이 분실 되었습니까?
EDIT :
<head>
<!-- Included script in head to run and fix bootstrap modal scroll 'save' position -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myModal').on('shown.bs.modal', function (e){
$('.modal-content').scrollTop(0);
});
});
</script>
</head>
<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<a title="Close" class="fancybox-item fancybox-close" data-dismiss="modal" aria-label="Close"></a>
<img src="images/sunset1.jpg" alt="me"/>
<h2>Content test</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum erat et neque tincidunt volutpat. Cras eget augue id dui varius pretium. Cras posuere dolor risus. Pellentesque elementum ultricies quam, sit amet rhoncus nisl viverra in. Cras imperdiet nisi a euismod molestie. Ut a metus arcu. Pellentesque feugiat dictum erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum erat et neque tincidunt volutpat. Cras eget augue id dui varius pretium. Cras posuere dolor risus. Pellentesque elementum ultricies quam, sit amet rhoncus nisl viverra in. Cras imperdiet nisi a euismod molestie. Ut a metus arcu. Pellentesque feugiat dictum erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum erat et neque tincidunt volutpat. Cras eget augue id dui varius pretium. Cras posuere dolor risus. Pellentesque elementum ultricies quam, sit amet rhoncus nisl viverra in. Cras imperdiet nisi a euismod molestie. Ut a metus arcu. Pellentesque feugiat dictum erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum erat et neque tincidunt volutpat. Cras eget augue id dui varius pretium. Cras posuere dolor risus. Pellentesque elementum ultricies quam, sit amet rhoncus nisl viverra in. Cras imperdiet nisi a euismod molestie. Ut a metus arcu. Pellentesque feugiat dictum erat.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
결과 : DelightedD0D 의해
해결책 :
수정 된 스크립트 :
<script type="text/javascript">
$(function() {
$('#myModal').on('hide.bs.modal', function (e){
$('#myModal').scrollTop(0); // change from .model-content to #myModal
});
});
</script>
나는 당신이 무슨 뜻인지 이해가 확실하지 않다. 이미 모달 아래에 스크립트 태그를 넣으려고했습니다. jQuery 라이브러리를 헤드 섹션에 넣으시겠습니까? – TheAmazingKnight
코드에 실제로 '
' 태그가 누락 되었습니까? 아니면 여기에 오타가 있습니까? – DelightedD0D아니요, 여기 오타가 있습니다. 실제 코드에는 body 태그가 있습니다. – TheAmazingKnight