Модальный закрывается, но полоса прокрутки не возвращается

ProgramBox

Модальный закрывается, но полоса прокрутки не возвращается

Post author:admin
Запись опубликована:2 марта, 2023
Post category:Вопросы по программированию

#html #ajax #twitter-bootstrap-3 #scrollbar

#HTML #ajax #twitter-bootstrap-3 #полоса прокрутки

Вопрос:

У меня есть модальная версия Bootstrap 3, которая закроет и вернет мою страницу в правильное состояние (которое показывает вертикальную полосу прокрутки), когда я закрою ее с помощью кнопки «закрыть» или «x» в правом верхнем углу. Однако, когда я пытаюсь использовать «кнопку выбора» в модальном закрытии после выполнения вызова ajax, вертикальная полоса прокрутки не возвращается на страницу. В коде у меня есть событие ‘onclick’, вызывающее .modal(‘скрыть’) , а также: data-dismiss=»модальный» на самой кнопке. Вызов ajax также выполняется правильно. Я не понимаю, почему это предотвращает повторное появление полосы прокрутки таким же образом, как при выборе одной из кнопок закрытия.

—Спасибо за ваши идеи.

 <div class="modal fade" id="modal_1timepmt" tabindex="-1" role="dialog" aria-labelledby="1timepmtLabel" aria-hidden="true">
<div class="modal-dialog admin_modal_dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">amp;times;</button>
      <h4 class="modal-title">Some Other Details</h4>
    </div>
    <div class="modal-body">
      <div class="container content-box live-box">
        <h3>Some Heading Here</h3>
        <form id="date_exp" name="date_exp">
            <div class="form-group" id="exp_form">
                <label for="log_start" class="control-label"><small>Date</small></label>
                <input type="date" class="form-control input-sm" name="exp_date" id="exp_date" data-format="yyyy-mm-dd" >
                <a href="/?object=result_detailamp;action=exp_date" onclick="priv_ajax.go({
                    url:this.href,
                    div:'web_adm_details',
                    data:priv_forms.capture(document.forms['date_exp'])
                }); return false; $('#modal_1timepmt').modal('hide');" >
                 <button style="margin-left: 10px; margin-top: 10px;"  class="btn btn-default btn-xs" data-dismiss="modal">Select</button></a>
            </div>
        </form> 
         </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>
</div>

1. Кажется, я не могу воссоздать вашу проблему. Запустите этот загрузочный файл ( bootply.com/cSgdTf8ER2 ) и посмотрите, сможете ли вы заставить проблему появиться…

2. Спасибо, что посмотрел, Шон. Я добавил несколько общих навигационных ссылок на левом поле, чтобы воссоздать существование полосы прокрутки перед отображением модального параметра. Он закрывается правильно, и полоса прокрутки все еще там. Я подозреваю, что без вызываемого мной метода ajax (priv_ajax.go();) он просто попадает в .modal(‘hide’) и закрывается нормально. Поскольку я не написал весь код (или css) для этого сайта, я просто надеялся, что кто-то, возможно, сталкивался с этим раньше. Еще раз спасибо…

Ответ №1:

Чтобы помочь всем, кто может столкнуться с этим. При дальнейшей проверке DOM после закрытия модала я заметил, что в теле все еще применялся этот класс: «.modal-open».

Удаление этого класса вернет страницу в нормальное состояние. Следующая простая строка кода, прикрепленная к событию onclick, решила эту проблему (хотя я до сих пор не выяснил основную причину).

 $('body').removeClass('modal-open');

1.Спасибо! У меня был вызов ajax в rails для закрытия модального, и страница не прокручивалась. добавление этой строки исправило это для меня! Для любого другого в подобной ситуации мне пришлось выполнить эти 3 строки, чтобы полностью закрыть модальный: $('#specific-div').modal('hide'); $('.modal-backdrop').remove(); $('body').removeClass('modal-open');

2. Я рад, что это кому-то помогло. Это поставило меня в тупик на долгое время!

3. Спасибо за этот очень полезный ответ, который помог мне определить проблему. Тем не менее, я действительно хочу определить основную причину, чтобы выяснить, почему этот класс не удаляется сам по себе. Самая неприятная часть заключается в том, что я попросил нескольких коллег протестировать это, и из 5 человек только 2 человека получили класс ‘modal-open’ после закрытия модального. Действительно непонятно.

4. Спасибо за этот ответ

Ответ №2:

Я думаю, что лучше создать просто новый класс css для всех открытых модалов. Итак, создайте класс CSS

 .modal.fade.in {overflow-x:hidden; overflow-y:auto;}

Это решит проблему для всех модалов.

PS: У меня была проблема, что после того, как я открыл модальный из модального, а второй модальный был слишком длинным, я не мог прокручивать (потому что javascript зарегистрирован data-dismiss="modal" , поэтому он забыл вспомнить, что я также вызываю data-toggle="modal" другой, чтобы он удалялся class="modal-open" из тела документа. В стиле bootstrap CSS для

 .modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

Я не очень хорошо разбираюсь в javascript, поэтому, к сожалению, не могу решить эту проблему как-то лучше на Java. 🙂

Ответ №3:

Может быть, модальное всплывающее окно закрыто неправильно.

Код для скрытия модального всплывающего окна

 $("#ModalId").modal("hide");