シンプルなモーダル ポップアップ ダイアログ ボックスを作成しています。基本は機能していますが、メインページのスクロールバーを使用してダイアログボックスをスクロールして制御したいと思います。
これが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: