オーバーフローするコンテンツを垂直にスクロールするモーダル ダイアログ ボックスを作成しようとしています。デモ用に、このダイアログ ボックスにはアンカーと div の束 (オーバーフローする) が含まれています。これが私のコードです：
HTML
<body>
<div id="dialog">
<a href="javascript:void(null);">blah blah blah</a>
<div>some content to make the dialog scroll appear</div>
<div>some content to make the dialog scroll appear</div>
<div>some content to make the dialog scroll appear</div>
<div>some content to make the dialog scroll appear</div>
<div>some content to make the dialog scroll appear</div>
<div>some content to make the dialog scroll appear</div>
</div>
</body>
jQuery
$(document).ready(function () {
$('#dialog').dialog({
position: 'center',
height: 300,
width: 200,
modal: true
});
});
デモ: JS Bin
問題を再現するには:
- ダイアログ ボックスの一番下までスクロールします。
- 実際のブラウザ ウィンドウへのフォーカスを失う (別のウィンドウに移動する、デスクトップをクリックするなど)。
- フォーカスされていないブラウザ ウィンドウのダイアログ ボックスにカーソルを合わせます
- ダイアログ ボックスをクリックします (または、ブラウザ ウィンドウを最小化/最大化します)。
その結果、ダイアログ ボックスが一番上のアンカー タグ ("何とか何とか") までスクロールして戻るはずです。(これには、ダイアログ ボックスでフォーカス/クリックを失うために何度か試行する必要がある場合があります) JS Bin コードは jQuery UI 1.10.2 を使用していますが、.3 でも発生します。
私の問題はこの SO questionに似ていると思いますが、アンカータグを使用しているため少し異なります...ただし、行hasFocus.eq(0).focus();が原因です。hasFocusその部分が実行されると、配列の最初の要素としてアンカー タグが含まれます。いずれにせよ、ダイアログ ボックスのデフォルトの動作は、一番上までスクロールして戻るべきではありません...そのままの位置にとどまるべきです!
さて、興味深いのは、削除modal: trueすると問題がなくなることです...これがバグなのか、それとも「機能」なのかはよくわかりません。誰か考えがありますか？
また、Firefox (複数のバージョンとセーフ モード) と IE8 でこれをテストしました。