Как я могу убедиться, что загруженный jQuery прокручиваемый модальный контент всегда прокручивается обратно наверх?

У меня есть функция Boostrap modal jQuery, которую я использую для вызова динамического контента через AJAX. Модальный также прокручивается и имеет фиксированную высоту, поэтому возможно, что кто-то прокручивает вниз внутри модального, а затем закрывает его (через кнопку внизу).

Проблема теперь заключается в том, что когда открывается другой модальный, он открывается в том же месте, где был закрыт предыдущий модальный, что означает, возможно, внизу, что сбивает с толку пользователя.

Есть ли простой способ сделать модальное всегда открытым (focus?) в верхней части содержания? Вот моя функция:

function open_box(params)
  {                 
    dump(params);
      var URL=ajax_url+"/?"+params;

        var modal = $('#modal');
        modal
            .find('.modal-body')
            .load(URL, function (responseText, textStatus) {
                if ( textStatus === 'success' || 
                     textStatus === 'notmodified') 
                {
                    modal.modal("show");
                }
        });  
}

CSS является:

    .modal-content {
        overflow: auto;
    }

    .modal-dialog {
    width: calc(100% - 100px);
    margin: 100px auto;
    height: 85%;
    max-height: calc(100% - 100px);
    max-width: 550px;
}

Я попытался добавить .scrollTop(0)код (прямо нижеfind), и это не сработало.

1 ответ

  1. Попробуйте использовать собственный метод браузера HTML-элементов scrollIntoView()(Docs). Если вы знаетеelement, что это именно верхний элемент в загруженном HTML, вы можете попробовать позвонить element.scrollIntoView()после того, как появится всплывающее окно. или можно определить первый дочерний элемент загруженного содержимого и прокрутить его наверх. Что-то вроде этого:

    function open_box(params)
      {                 
        dump(params);
          var URL=ajax_url+"/?"+params;
    
            var modal = $('#modal');
            var modalBody = modal.find('.modal-body');
            modalBody
                .load(URL, function (responseText, textStatus) {
                    if ( textStatus === 'success' || 
                         textStatus === 'notmodified') 
                    {
                        modal.modal("show");
                        modalBody.get(0).children[0].scrollIntoView();
                    }
            });  
    }