Question

我有一个Boostrap模态jQuery函数，我用它来通过AJAX调用动态内容。模态也是可滚动的并且具有固定的高度，因此有人可能在模态内向下滚动然后将其关闭（通过底部的按钮）。

现在的问题是，当打开另一个模态时，它会在前一个模态关闭的同一位置打开，这可能位于底部，这会让用户感到困惑。

是否有一种简单的方法可以使模态始终打开（焦点？）在内容的顶部？这是我的功能：

public class ListViewCell extends ListCell<Data>
{
    @Override
    public void updateItem(Data data, boolean empty)
    {
        super.updateItem(data, empty);
        if(empty || data == null){
            setGraphic(null);
            setText(null);
        }
        if(data != null)
        {
            Region region = createRow(data);
            region.prefWidthProperty().bind(mListView.widthProperty().subtract(20));
            region.maxWidthProperty().bind(mListView.widthProperty().subtract(20));
            setGraphic(region);
        }
    }
}

CSS是：

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");
                }
        });  
}

我尝试在代码中添加.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)下方）并且没有用。

Answer 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();
                }
        });  
}

如何确保jQuery加载的可滚动模式内容始终滚动回顶部？

1 个答案: