jQuery UI를 사용하여 계단식 대화 상자를 만드는 방법은 무엇입니까?

Question

나는 여기 jQuery를 UI의 대화 기능을 사용하고 있습니다 :

http://jqueryui.com/dialog (API Here)

내가 계단식 방식으로이 상자의 무리를 시작하고 싶습니다. 불행하게도 나는 화면의 매우 특정한 영역 (나는 잘못 될 수도 있음)에 상당히 제한적으로 보이는 것처럼 Position 옵션이 나를 위해 이것을 할 것이라고 생각하지 않는다. 이 링크를 여러 번 클릭하고 주변에 새롭게 문을 연 대화 상자를 이동하는 경우

//Code used to launch little score cards of the the leads 
var boxID = 0; 
$('a.manageLead').click(function() { 
    boxID = boxID + 1; 

    var url = this.href; 

    // show a spinner or something via css 
    var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body'); 

    // open the dialog 
    dialog.dialog({ 
     // add a close listener to prevent adding multiple divs to the document 
     close: function(event, ui) { 
      // remove div with all data and events 
      dialog.remove(); 
     }, 
     modal: false, 
     resizable: false, 
     dialogClass: "dialog-box-"+boxID, 
     position: { my: "center top", at: "center top" }, 
     title: "Lead Details" 
    }); 

    // load remote content 
    dialog.load(
     url, 
     {}, 
     function (responseText, textStatus, XMLHttpRequest) { 
      // remove the loading class 
      dialog.removeClass('loading'); 
     } 
    ); 

    ////////////////////////////////////////////////////////////////////////////////////////////// 
    ////////////////////////////////////////////////////////////////////////////////////////////// 
    ////////////////////////////////////////////////////////////////////////////////////////////// 

     ////// THIS IS WHERE I'M TRYING TO MAKE THE MAGIC HAPPEN /////// 

    var modalTop = Number($('.dialog-box-'+boxID).css("top").replace("px", "")) + 20; 
    var modalLeft = Number($('.dialog-box-'+boxID).css("left").replace("px", "")) + 20; 
    $('.dialog-box-'+boxID).css("top", modalTop+"px !important"); 
    $('.dialog-box-'+boxID).css("left", modalLeft+"px !important"); 

    ////////////////////////////////////////////////////////////////////////////////////////////// 
    ////////////////////////////////////////////////////////////////////////////////////////////// 
    //////////////////////////////////////////////////////////////////////////////////////////////    


    //prevent the browser to follow the link 
    return false;    

}); 

: 여기 http://jsfiddle.net/bUFnE/1/

내 JS입니다 :

내가 현재 가지고있는 코드이 바이올린을 살펴보십시오 , 당신은 그들이 서로의 위에 쌓아 놓는 것을 볼 수있을 것입니다. 나는 그들에게 천천히 페이지 + 20px 윗쪽으로 크리프시키고 20px 왼쪽으로 한 다음 200px를 한번 쳐서 다시 처음부터 다시 시작하길 바란다.

Answer 1

키는 .position 함수의 매개 변수에 오프셋을 추가하는 것입니다.

너는 here을 볼 수있다.

다음은 작동되는 업데이트 된 바이올린입니다.

position: { my: ("center+"+ center + " top+" + top), at: "center top" } 

http://jsfiddle.net/xGsCC/은 그냥 취향에 따라 원하는 영역 중앙 상단에 추가됩니다 10을 변경합니다.

참고 : 결국 "오버런"을 방지하기 위해 "닫기 :"기능에서 뺍니다.

Answer 2

당신의 position 인수는 다음과 같습니다 부모의 중앙 상단에 각각의 새로운 대화 상자를두고

{ my: "center top", at: "center top" } 

. 당신은이 논쟁을 결코 바꿀 수 없으므로 모든 대화 상자는 매번 같은 장소에 나타날 것입니다.

jQueryUI 위치 문서에 따르면 위치 문자열에서 오프셋을 지정할 수 있습니다.

var posArgs = { my: "center top", at: "center top" }; 

if (parent) { 
    posArgs = { my: "left top", at: "left+20 top+20", of: parent }; 
} 

다음 dialog에 호출에서 새로운 위치 인수를 사용하고 다음 대화 상자의 부모로 새로운 대화를 저장하는 기억 :

dialog.dialog({ 
// add a close listener to prevent adding multiple divs to the document 
    close: function(event, ui) { 
     // remove div with all data and events 
     dialog.remove(); 
    }, 
    modal: false, 
    resizable: false, 
    dialogClass: "dialog-box-"+boxID, 
    position: posArgs, 
    title: "Lead Details" 
}); 
parent = dialog; 

그래서 click 기능의 내부 같은 것을 시도

좌표의 배치 및 대화 상자가 닫히고 물건이 있는지 오류 검사를 처리하도록하겠습니다. 행운을 빕니다!