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 に答える