У меня проблема, у меня никогда не было с модальным окном Bootstrap 3. Я прокручиваю вниз, чтобы закрыть окно модального окна и снова открыть его, чтобы выяснить, сохраняет ли я положение, в котором я его последний раз закрывал. Как правило, каждый раз, когда я его открываю, он сбрасывает свиток, но на этот раз этого не происходит.Где правильно разместить скрипт так, чтобы он выполнялся?
<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(function() {
$('#myModal').on('shown.bs.modal', function (e){
$('.modal-content').scrollTop(0);
});
});
быть решение на мой ответ, но опять же это не будет работать его. Я отлаживал его и анализировал, что, когда я помещаю его во внешний файл js (custom.js), по мере загрузки страницы, он распознает функцию $(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>
@ jfriend00 Я не уверен, я понимаю, что вы имеете в виду. Я уже пробовал поставить тег скрипта под модальный. Вы предлагаете, я поместил библиотеку jQuery в раздел главы или? – TheAmazingKnight
Вы действительно пропускаете теги '
' в своем коде или это опечатка здесь? – DelightedD0DНет, просто опечатка здесь, у меня есть теги тела в реальном коде. – TheAmazingKnight