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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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