开发者

How to keep scroll position in SimpleModal dialog

How is it possible to keep the scroll position of a scrollable div within a modal dialog开发者_如何学JAVA when it is re-opened?

I modified the basic downloadable example of simplemodal as follows:

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


I tested this solution with Simple Modal and it works

If you are using there Basic Dialog demo, just change out the basic.js file for this code. It just gets the scrollTop before the dialog closes, and resets it when the dialog reopens. We have to call the full selector for the div each time because of how SimpleModal works:

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜