代码之家 › 专栏 › 技术社区 › user250343

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

simplemodal modal-dialog scroll dialog jquery

2

user250343 · 技术社区 · 15 年前

当一个可滚动的DIV被重新打开时,它如何能够在模式对话框中保持滚动位置?

我修改了简单模式的基本可下载示例,如下所示:

<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>

1 回复 | 直到 15 年前

1

2

Doug Neiner 15 年前

我用简单的模式测试了这个解决方案,它起作用了

如果您使用的是基本对话框演示,只需更改 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();
      }
    });
  });
});