jquery - 滚动 jQuery UI 模式覆盖不滚动

Question

我正在构建一个简单的模态弹出对话框。基础工作正常，但我希望对话框滚动，使用主页滚动条来控制它。

我不确定这是 jquery 问题还是 css 问题。

我追求的效果是这样的: http://www.script-tutorials.com/demos/328/index.php (单击图像，然后滚动外部窗口滚动条)。

我的代码在这里: https://gist.github.com/sfcarroll/4739040

CSS:

#overlay {
  bottom: 0;
  display: none;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 100;
}

#blanket {
  background-color: white;
  bottom: 0;
  display: block;
  opacity: 0.8;
  position: absolute; 
  top: 0;
  width: 100%;
}

.dialog {
  background: white;
  border-radius: 10px;
  display: none;
  margin: 100px auto;
  position: relative;
  width: 700px;
  height: 2000px;
  padding: 40px;
  border: 1px solid #F7F5F5;
  box-shadow: 0 2px 20px rgba(34, 25, 25, 0.5);

我知道我给出的例子是使用 colorbox 插件，但我希望标准 jQuery UI 可以实现这种效果。

jsfiddle:

http://jsfiddle.net/dEzMp/

Answer 1

添加一点jQuery:

var postop = $('dialog').offset().top;

$(window).scroll(function() {
   $('.dialog').css('top', postop);
});

并更改您的 .dialog div 位置:

.dialog {
   position: absolute;
}