2010-11-30 6 views
3

양식이있는 jQuery 대화 상자가 있고 양식 상자 중 하나에 첨부 된 자동 완성 상자가 대화 상자 위를 떠 다니기를 원합니다 (목록이 대화 상자 끝을 넘으면이 상자가 나타납니다) 't는 잘리게된다). 다음 CSS 요소가 자동 완성 div에 적용되었습니다.jQuery UI 대화 상자 위에 div를 가져 오는 방법은 무엇입니까?

background:none repeat scroll 0 0 white; 
float:left; 
position:absolute; 
z-index:9999; 

여전히 대화 상자에 스크롤 막대가 생성됩니다. 거래는 뭐니? 나는 대화 상자가 Z- 색인 인 것을 본다 : 1004; 그래서 나는 왜 내 것이 그것의 꼭대기에 가지 않을지 모르겠다. 나는 가능한 한 달성하려고 노력하고 있습니까?

답변

2

이유는 요소가 대화 상자 컨테이너의 하위 요소이기 때문입니다. Z- 색인은 당신이 원하는 것을하지 않습니다. 요소는 대화 상자 외부에 있어야하고 그에 따라 배치되어야합니다.

6

은이 게시물은 오래 알고 있지만, 당신은 다음과 같이 수행 할 수 있습니다

하나는 overflow:visible, 또는 대화 상자가 클릭에 열 경우를 위해 UI를 jQuery의 CSS 파일의 "UI-대화"클래스 설정을 버튼, 예를 들어, 같은 것을 할 :

$("mybutton").click(function() { 
    $("mydialog").dialog(); 
    $(".ui-dialog").css("overflow", "visible"); 
}); 

당신의 모든 대화 상자를하지 않으려면 두 번째 일을 할이 경우 overflow:visible

0

확실하지 가지고 (당신은 더 많은 경우) 너는 무엇을 위해 가고 있었는지 생각했지만 이드는 나눌 것을 생각했다. div 창을 대화 상자 창에 추가하여 내용물 위에 겹쳐서 표시했습니다.

.dialogWindowLoading { 
z-index:99999; 
background:rgba(0,0,0,0.8);; 
width:100%; 
height:100%; 
position:absolute; 
top:0; 
left:0; 
} 

$("#dialogWindow").dialog({ 
     autoOpen: false, 
     resizable: false, 
     draggable: false, 
     modal: true, 
     position: { my: 'center', at: 'center' }, 
     heigth: 425, 
     width: 400, 
     title: "dialog window", 
     open: function (event, ui) { 
       $("#dialogWindow").append(" 
       <div id='dialogWindowLoading'><span>dialog window overlay</span></div>");  
      } 
     }).parent().appendTo("form:first"); 
관련 문제