0

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

我不确定这是 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/

4

2 回答 2

1

添加一点jQuery：

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

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

并更改您的.dialogdiv 位置：

.dialog {
   position: absolute;
}
于 2013-02-08T14:23:55.400 回答
0

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

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

于 2013-02-10T09:51:58.197 回答