YUI2 대화 상자의 마크 업을 정확하게 숨기지 않는 대화 상자

Question

YUI의 대화 상자 위젯을 사용하면 큰 대화 상자 (내용이 많음을 생각할 때)를 제외하고는 잘 동작합니다. 페이지 끝에 눈에 띄는 부작용이 나타납니다. 페이지 끝의 많은 공백 및 스크롤바. 여기

은 예입니다 :

->http://jsbin.com/ekaca4

내가 developer.yahoo.com/yui/examples/container/dialog-quickstart_clean.html의 대화에 대한 원래의 예를 가지고 추가했다 않은 모든 마크 업 (Lorem Ipsum 형식) 당신이 코드가 설정되는 방식을 보면

는 (#의 dialog1에서) 마크 업이 Yahoo.util.Event.onDomReady 화재 때까지 페이지 에 완전하게 볼 수 있습니다, 그리고 대화는

에서 인스턴스화

YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", 
     { width : "30em", 
     fixedcenter : true, 
     visible : false, 
     constraintoviewport : true, 
     buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true }, 
      { text:"Cancel", handler:handleCancel } ] 
     }); 

내 마크 업을 모두 가지고있는 플레인 제인 <div id="dialog1">이 컨테이너 번호 <div class="yui-panel-container yui-dialog yui-overlay-hidden shadow" id="dialog1_c" style="visibility: hidden; z-index: 2; left: 307px; top: 10px;">으로 포장됩니다.

이 콘텐츠는 내 레이아웃의 상당 부분이고 스크롤바와 세로 공간이 존재한다는 것을 제외하면 괜찮습니다. yui-overlay-hide처럼 스타일을 추가하려고하면 display : none 또는 height : 0; 오버플로 : 숨김, 오버레이와 같은 이상한 부작용이 표시 될 때 잘못 배치됩니다. 지금까지 실제로 영향을 미쳤던 유일한 방법은 # dialog1을 높이가 0 인 포함 div에 넣는 것입니다. overflow : hidden,하지만 Internet Explorer 7에서는 작동하지 않습니다 (공백은 init 후에 페이지에 계속 남아 있습니다).

도움을 주셔서 감사합니다. 정말 고맙습니다.

Answer 1

나는 다음과 같은 CSS로 사업부 내 모든 대화 상자를 넣어 :

div.dialogs{display:none;position:fixed;top:0px;left:80px;

하는 벌금 지금까지 내가 인해 더 이상 대화 상자에 스크롤 막대 및 수직 공간이 없습니다 작동합니다. 대화 상자가 렌더링 된 후에야 html을 숨길 수있는 display:none을 포함시킵니다. 렌더링이 완료되면 디스플레이를 "차단"으로 변경합니다. 이것이 없으면 사전 렌더링 된 html이 2 ~ 2 초 동안 표시되어 페이지가 다소 깜박 거리게됩니다.