1
오버플로되는 콘텐츠에 대한 세로 스크롤이있는 모달 대화 상자를 만들려고합니다. 데모 목적을 위해이 대화 상자에는 앵커 및 div (잔뜩 오버플로)가 포함되어 있습니다. 여기 내 코드입니다 :jQuery UI : 모달 대화 상자 포커스 버그?
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에서도 발생합니다.
나는 내 관심사가 this SO question과 비슷할 수 있다고 생각하지만 앵커 태그를 사용하고 있기 때문에 조금 다릅니다 ... 그러나 hasFocus.eq(0).focus(); 줄이 범인입니다. 해당 부분이 나를 위해 실행될 때 hasFocus 배열의 첫 번째 요소로 내 앵커 태그가 있습니다. 어느 쪽이든, 대화 상자의 기본 동작은 맨 위로 스크롤하지 않아야합니다 ... 그것은 그대로 있어야합니다!
이제 재미있는 부분은 modal: true을 없애면 문제가 더 이상 존재하지 않기 때문에 ... 버그인지 '기능'인지는 잘 모르겠습니다. 누구든지 어떤 생각을 가지고 있습니까?
또한 Firefox (여러 버전 및 안전 모드)와 IE8에서 테스트했습니다.
관련 jQuery UI [버그 리포트] (http://bugs.jqueryui.com/ticket/9101). – incutonez