I am trying to create a modal dialog box that has a vertical scroll for content that overflows. For demo purposes, this dialog box contains an anchor and a bunch of divs (to overflow). Here is my code:
The 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>
The jQuery
$(document).ready(function () {
$('#dialog').dialog({
position: 'center',
height: 300,
width: 200,
modal: true
});
});
The Demo: JS Bin
To reproduce the issue:
- Scroll down to the bottom of the dialog box
- Lose focus on the actual browser window (go to another window, click the desktop, etc.)
- Hover over the dialog box in the unfocused browser window
- Click in the dialog box (or just minimize/maximize your browser window)
The result should be the dialog box scrolling back to the topmost anchor tag ("blah blah blah"). (This may require several attempts to lose focus/click in the dialog box) The JS Bin code is using jQuery UI 1.10.2, but it happens in .3 as well.
I believe my issue may be similar to this SO question, but it's a little different because I'm using anchor tags... however, the line hasFocus.eq(0).focus(); is the culprit. When that part executes for me, it has my anchor tag as the first element in the hasFocus array. Either way, the default behavior for a dialog box should not be scrolling back to the top... it should stay where it is!
Now, the interesting part is once you take away modal: true, the issue is no longer there... so I'm not really sure if this is a bug or if it's a "feature." Does anyone have any thoughts?
Also, I've tested this in Firefox (multiple versions and safe mode) and IE8.
