1

Собственно проблема, при открытии модального окна (от bootstrap) на странице скролл страницы переводится в самый верх. Как можно от этого избавиться?

модальное окно

<div class="modal fade" id="modalView" tabindex="-1" role="dialog" aria-labelledby="modalView" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document" >
        <div class="modal-content" style="background: linear-gradient(#1A1E21, #1A1E21, #1A1E21);; color: #fff;">
            <div class="modal-header"">
                <h5 class="modal-title" id="modalViewTitle"></h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close" >
                    <span aria-hidden="true" style="color: #fff !important;">&times;</span>
                </button>
            </div>
            <div class="modal-body" >
                <div class="container-fluid text-center">
                    <img src="" alt="photo" width="90%" height="auto" id="modalViewImage">
                    <p id="modalViewText" style="margin-top: 20px; font-size: 20px;">

                    </p>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

влияет это или нет, но это тоже выложу

<html lang="en" style='overflow-x: hidden;'>

модальное окно открывается через js

$(".view").click(function() {
    $("#modalView").modal('show');
}
2
  • код покажите пожалуйста. Commented 18 нояб. 2017 в 6:24
  • @artem55555p не знаю, что вы тут можете увидеть, но пожалуйста, вставил
    – epsilon
    Commented 18 нояб. 2017 в 6:31

1 ответ 1

1

Вариант 1

Когда модальное окно открывается, класс modal-open устанавливает тег <body>. Этому классу присваивается overflow: hidden; к тегу body. Добавьте это в css, чтобы переопределить стиль bootstrap.css:

body.modal-open {
    overflow: visible;
}

Вариант 2

Смотря как вы вызываете открытие окна. Если через тег <a href="#myModal">, то оно будет скролиться, попробуйте сделать так:

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Кнопка
</button>

Вариант 3

$('ваш класс').click(function ($e) {
    $e.preventDefault();
});
7
  • помогло, но теперь при открытии модального окна у всей страницы справа появляется небольшой отступ
    – epsilon
    Commented 18 нояб. 2017 в 6:48
  • @epsilon скрин можно? Commented 18 нояб. 2017 в 6:48
  • если честно, я не знаю, как сюда картинки вставлять. но я забыл сказать, что открываю модальное окно через js $(".view").click(function() { $("#modalView").modal('show'); } пытался сделать как в 3 варианте, не помогло
    – epsilon
    Commented 18 нояб. 2017 в 6:59
  • 1
    @epsilon может это полоса скролла появляется? Commented 18 нояб. 2017 в 7:01
  • посмотрел исходный код, при открытии модального окна к body добавляется padding-right: 17px
    – epsilon
    Commented 18 нояб. 2017 в 7:06

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.