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

Answer 2

我找到了我想要的Twitter Bootstrap扩展名。

http://jschr.github.com/bootstrap-modal/

滚动jQuery UI模式覆盖不滚动

2 个答案: