Модальное окно Bootbox прокручивается вверх страницы перед открытием

Я использую bootstrap 3 и bootbox.js для своего фильтруемого портфолио, и я хочу иметь возможность прокручивать вниз, когда модальное окно длиннее окна браузера, но у вас не должно быть возможности прокручивать модальное окно.

По умолчанию, когда вы нажимаете элемент портфолио, модальное окно прокручивается вверх страницы, чтобы открыть его. Я использовал javascript:void(0); в ссылках на свое портфолио, чтобы исправить это. но position:absolute на .modal ломает это.

Но position:absolute и overflow:auto позволяют мне прокручивать модальное окно так, как мне нужно (просто не знаю, как ограничить прокрутку до конца модального окна)

Посмотрите мой css:

.modal {
top: 10%;
left: 50%;
margin-left: -280px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
outline: none;
display: table;
position: absolute;
}

.modal-open {
overflow: auto;
}

Вы можете посмотреть реальную версию моего сайта здесь (прокрутите до портфолио и выберите проект)

Я настроил скрипт, чтобы всем было проще: http://jsfiddle.net/p4Yw2/

Итак, мне нужно:

  1. Еще один способ исправить проблему «прокрутить вверх перед открытием оповещения», кроме javascript:void(0);

  2. Способ ограничить прокрутку немного после модального окна (сейчас вы можете прокручивать всю страницу вниз, когда модальное окно открыто)

ОБНОВЛЕНИЕ: Итак, причиной этой проблемы является мой файл smooth-scroll.js, который состоит из:

$(function(){   

var $window = $(window);
var scrollTime = 0.7;
var scrollDistance = 275;

$window.on("mousewheel DOMMouseScroll", function(event){

    event.preventDefault(); 

    var scrollTop = $window.scrollTop();
    var finalScroll = scrollTop - parseInt(delta*scrollDistance);

    TweenMax.to($window, scrollTime, {
        scrollTo : { y: finalScroll, autoKill:true },
            ease: Power1.easeOut,
            overwrite: 5                            
        });

    });
});

javascript css twitter-bootstrap gsap bootbox
person ve1jdramas    schedule 20.03.2014    source источник
comment
Не могли бы вы собрать код в jsfiddle, чтобы нам было легче предлагать изменения/предложения?   -  person lando    schedule 24.03.2014
comment
Рассматривали ли вы установку href на идентификатор модального окна? Затем в JS используйте preventDefault()? По идее, без ваших дополнительных стилей к модальному, Bootstrap вообще не должен прокручивать тело, только содержимое модального.   -  person davidpauljunior    schedule 24.03.2014
comment
Хорошо, я настроил скрипт, чтобы всем было проще jsfiddle.net/p4Yw2   -  person ve1jdramas    schedule 24.03.2014
comment
@davidpauljunior есть шанс продемонстрировать это? Я читал об использовании preventDefault() для решения этой проблемы, но я не мог понять, куда его поместить в моей ситуации, и могу ли я просто настроить таргетинг на класс .modal по умолчанию из бутстрапа?   -  person ve1jdramas    schedule 24.03.2014
comment
Я думал, что модальный html уже был на странице, я не знал, что Bootbox добавляет его на страницу. Не уверены, действительно ли вам здесь нужен Bootbox? Вы можете удаленно загружать свое модальное содержимое с помощью кода Bootstrap по умолчанию? Например. <a href="http://jsbin.com/koheq/1" data-toggle="modal" data-target="#modal" id="branding1">. Попробуйте этот JSBin (jsbin.com/yepec/1/edit), там нет Bootbox или дополнительных JS. Это позволяет вам иметь модальное содержимое в виде отдельных файлов.   -  person davidpauljunior    schedule 24.03.2014
comment
@davidpauljunior на самом деле ты совершенно прав! В итоге я использовал модальный режим начальной загрузки по умолчанию. Если вы хотите опубликовать ответ и помочь с небольшой проблемой, с которой я столкнулся, я дам вам награду! Если вы посмотрите на живой сайт, вы увидите, что я сделал это так же, как и вы, но все еще есть проблема с прокруткой, она немного лучше, но теперь отображается полоса прокрутки, но когда вы прокручиваете колесо мыши, она прокручивается фон еще. Но область просмотра ограничена модальной прокруткой. Мне просто нужен способ, так сказать, отменить фоновую прокрутку.   -  person ve1jdramas    schedule 26.03.2014
comment
@ ve1jdramas Отлично, я добавил ответ, а тем временем изучаю проблему с прокруткой.   -  person davidpauljunior    schedule 26.03.2014
comment
@ ve1jdramas. Интересно, что если вы добавите «overflow: hidden» в тело до запуска модального окна (через Inspector), вы все равно сможете прокручивать, что странно (т. Е. Переполнение не скрыто). Попробуйте удалить скрипты прокрутки («scroll-link», «smooth-scroll», «scrolltoplugin», «skrollr», «go-skrollr» и т. д.) и посмотрите, изменится ли это.   -  person davidpauljunior    schedule 26.03.2014
comment
@davidpauljunior хорошо, ты был совершенно прав! Smooth-scroll.js вызывает проблему! Сейчас пытаюсь исправить, но почему-то не получается! Если вы не против взглянуть, я добавил JS в вопрос   -  person ve1jdramas    schedule 26.03.2014
comment
@ve1jdramas Я лично нахожу сценарии, которые мешают мне использовать колесико мыши, очень раздражающими и навязчивыми. Возможно, рассмотрите возможность использования этой плавной прокрутки из трюков CSS, которая просто красиво анимируется, когда вы нажимаете ссылки, и страница прокручивается до цели. css-tricks.com/snippets/jquery/smooth-scrolling   -  person davidpauljunior    schedule 27.03.2014
comment
@davidpauljunior На самом деле у меня это тоже уже есть, я хотел добавить что-то немного больше (я знаю, что сейчас это немного медленно, я собирался настроить его соответствующим образом), но в любом случае, если вы хотите попробовать, я дам вам конец щедрости сегодня, если вы придумаете что-то или нет :) вы очень помогли! Я собираюсь попробовать другие способы, чтобы посмотреть, не могу ли я понять что-то еще. Я действительно ненавижу прокрутку по умолчанию, лол, просто хочу немного ее почистить.   -  person ve1jdramas    schedule 27.03.2014
comment
@ve1jdramas - Ах да, я и не знал, что у тебя это уже есть. Честно говоря, я не эксперт JS, поэтому выяснить, что вызывает проблему с вашим скриптом выше, мне немного не по себе. Вы можете поступить правильно, если возьмете этот фрагмент и зададите новый вопрос, чтобы выяснить, почему он вызывает конфликт в Bootstrap. Я заметил, что если вы поместите этот скрипт в JSBin, вы получите эту ошибку: Line 12: var finalScroll = scrollTop - parseInt(delta*scrollDistance); --- Missing radix parameter. Не уверен, что это вам поможет!   -  person davidpauljunior    schedule 27.03.2014

Ответы (3)


arrow_upward
2
arrow_downward

Если вам нужен Bootbox (исходя из требований в этом вопросе, это кажется излишним), то то, что вы хотите, звучит как то, что Bootstrap предлагает из коробки с модальной загрузкой удаленного контента. Вы можете хранить все свое различное модальное «содержимое» в виде отдельных страниц, а затем сделать так, чтобы каждая ссылка указывала на другую часть модального содержимого. Например:

<a href="path_to_remote_content" data-toggle="modal" data-target="#modal" id="branding1">.

Этот метод потребует, чтобы у вас уже был пустой модальный код на вашей странице, а затем содержимое загружалось в файл .modal-content.

Модальный HTML для страницы

<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

Удаленный контент HTML

<div class="modal-header">
  <h4>Beach Me</h4>
</div>
<div class="modal-body">
  ...
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

Вам нужно будет удалить все добавленные вами стили, которые переопределяют модальные стили Bootstrap.

Демо

person davidpauljunior    schedule 26.03.2014
comment
Просто примечание: эта функция устарела и не будет существовать в Bootstrap 4: getbootstrap.com/javascript /#модальные параметры - person Tieson T.; 14.07.2016

arrow_upward
2
arrow_downward

Я была такая же проблема. Bootbox меняет переполнение тела на скрытое, делая страницу маленькой, чтобы ее нельзя было прокручивать.

Этот css решил это для меня:

body.modal-open {
    overflow: visible;
}
person Vin    schedule 14.11.2014

arrow_upward
0
arrow_downward

Тег <a>, чтобы добавить класс для обработки всех

jquery

$('.modal-section').click(function() {
      $('section').css("display",'none');
}

or

$('#branding1').click(function() {
            $('section').css("display",'none');
            bootbox.alert('/*you html*/');
                  });

$('#print3').click(function() {
           $('section').css("display",'none');
            bootbox.alert('/*you html*/');
                  });

и модальное закрытие кнопки:

   $('section').css("display",'block');
person alessandrio    schedule 24.03.2014
comment
Я попробовал это, но это ничего не изменило. - person ve1jdramas; 24.03.2014
comment
Кажется, это работает для меня, на странице есть различные элементы, для работы которых требуется jQuery. - person ve1jdramas; 24.03.2014
comment
тогда есть что-то, что мешает выполнению моего кода, который должен работать - person alessandrio; 24.03.2014
comment
Я пытаюсь настроить это, но я все еще не получаю никаких результатов. В любом случае вы можете отредактировать скрипту, поэтому Я точно вижу, как ты это сделал? - person ve1jdramas; 24.03.2014
comment
первый $('#branding1').click(function(){$('section').css("display",'none');}); - person alessandrio; 24.03.2014
comment
Это не сломает загрузочную коробку, вы хотите, чтобы я заменил это $('#branding1').click(function() { bootbox.alert( на $('#branding1').click(function(){$('section').css("display",'none');}); это? Я просто запутался 100% сейчас - person ve1jdramas; 24.03.2014
comment
нет, просто добавьте код $('#branding1').click(function() { $('section').css("display",'none'); bootbox.alert('/*you html*/'); }); - person alessandrio; 24.03.2014
comment
и модальное закрытие кнопки: добавить $('section').css("display",'block'); - person alessandrio; 24.03.2014