在Pinterest上接管浏览器滚动条的模态窗口

我有一个模态窗口，它将显示比浏览器窗口高度更长的内容，所以我需要创建一个模态窗口来接管浏览器的滚动条，就像我们在Pinterest上看到的那样。 此外，单击图像将导致该图像转换为模态窗口中的图像。

注意模态的打开如何更改滚动条

问题：如何创建相同的模态窗口（接管滚动条）和图像动画？ 我知道当模态窗口出现时，浏览器地址栏中的URL会发生变化，但您会注意到该页面并没有真正改变。 我能够使用backbone.js这样做，所以不用担心。

HTML代码

Click me!
 
 
 
  
 
  

JS代码

 $('#showModal').click(function() { $('.modal').show(); }); 

Answer 1

首先，我建议你的模态的html结构类似于这个：

然后，在’click’上，你将添加overflow:hidden到body ，并以某种方式将display:block添加到.modal-container 。 .modal-container会有相应的css：

 .modal-container { display: none; overflow-y: scroll; position: fixed; top: 0; right: 0; height: 100%; width: 100%; } 

看看http://jsfiddle.net/joplomacedo/WzA4y/上的一个工作示例