如何在 SimpleModal 对话框中保持滚动位置

【问题标题】：How to keep scroll position in SimpleModal dialog如何在 SimpleModal 对话框中保持滚动位置
【发布时间】：2010-01-16 02:50:27
【问题描述】：

当一个模态对话框重新打开时，如何保持可滚动 div 的滚动位置？

我将simplemodal的基本可下载示例修改如下：

<div id="basic-modal-content">
    <h3>Scrollable Modal Dialog</h3>
    <div style="width: 150px; height:100px; overflow: auto;">
        a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    </div>
</div>

【问题讨论】：

标签： jquery dialog scroll modal-dialog simplemodal

【解决方案1】：

我用 Simple Modal 测试了这个解决方案，它可以工作

如果您正在使用 Basic Dialog 演示，只需更改此代码的 basic.js 文件即可。它只是在对话框关闭之前获取scrollTop，并在对话框重新打开时重置它。由于 SimpleModal 的工作方式，我们每次都必须调用 div 的完整选择器：

$(document).ready(function () {
  var scrollTop = null;
  $('#basic-modal input.basic, #basic-modal a.basic').click(function (e) {
    e.preventDefault();
    $('#basic-modal-content').modal({
      onShow: function(){
        if(scrollTop !== null) $('#basic-modal-content > div').scrollTop(scrollTop);
      },
      onClose: function(){
        scrollTop = $('#basic-modal-content > div').scrollTop();
        $.modal.close();
      }
    });
  });
});

【讨论】：