다른 요소 위에 색상 상자 배치

Question

저는 colorbox의 위치 지정에 상당한 문제가 있습니다. 공식 웹 사이트 http://www.jacklmoore.com/colorbox/에 설명 된 방법으로는 제 목적에 충분하지 않습니다. 문제는 내가 colorbox를 여는 버튼이 있고 "버튼 위에"배치해야한다는 것입니다 (버튼의 높이는 50px이고 colorbox는 700px 정도의 높이이므로 버튼 위에 가운데 놓아야합니다 (300px의 상단과 같은 것). .

   onOpen:function() { 
         $('#colorbox').removeAttr('top'); 
         $('#colorbox').css('top','200px'); 
         }, 

그것은 작동하지만 colorbox 설정이 자동으로 우측으로 onOpen 나에 onLoad 및 colorbox 후 이러한 설정을 덮어 쓰기의 중앙에 위치한다 :)는

내가 좋아하는 colorbox 년으로 onOpen와의 onLoad 기능에 jQuery로 기본적인 재배치를 시도했다 뷰포트 다시.

그래서 기본적으로 도움을 요청합니다, colorbox 상단, 좌측 등의 위치 설정은 버튼 요소 위에 위치시키기에 충분하지 않습니다.

미리 감사드립니다.

편집 :

$(".reserve_").live('click',function() { 
var loadUrl = $(this).attr("href"); 
$.colorbox({ 
       innerWidth:660, 
       innerHeight:720, 
       returnFocus: true, 
       overlayClose: true, 
       fixed: false, 
       iframe: true, 
       href: loadUrl, 
       opacity: 0.6, 
       reposition: true, 
       onOpen:function() { 
         $('#colorbox').removeAttr('top');//test 
         $('#colorbox').css('top','200px');//test 
         }, 
       onLoad: function() { 
         $('#colorbox').removeAttr('top');//test 
         $('#colorbox').css('top','200px');//test 
         }, 
       onClosed:function() { 

         } 
    }); 
return false; 


}); 

편집이 아래의 전체 코드 : jsfiddle에 링크 : http://jsfiddle.net/zS8J8/8/ (죄송 지저분한 CSS 코드와 HTML에 대한)을 jsfiddle, 나는 할 수 도움이었다

Answer 1

동일한 코드를 사용하고 작동 시키십시오.

위의 테스트에서 Firefox 7의 20 번, 26 번, 9 번 IE에서 테스트되었습니다. "Open Colorbox"링크는 HTML을 사용하는 IE에서는 보이지 않지만 해당 영역에서 마우스를 움직이면 커서가 바뀌고 클릭하면 Colorbox가 올바른 위치에서 열립니다.

: 여기

<h3 style="margin-bottom: 300px;">TOP OF THE PAGE</h3> 

<div class="unitKontejner">    
    <div style="float:right;"> 
    <a id="rezervuj" href="http://www.imgur.com"> 
     <div class="reserveIt"> 
     <div class="reserveIt-content"> 
      open colorbox&nbsp;» 
     </div> 
     </div> 
    </a> 
    </div> 
</div> 

당신이 머리에 넣을 수 있습니다 스크립트입니다 : 우리는 오히려 이미지의 무리보다 하나의 요소에 키 입력하고 있기 때문에 여기에

는 HTML, 난 id="rezervuj"에 class="rezervuj" 변경

<script> 
$(document).ready(function(){ 

// I removed the options that were set to the default. 
// The top and left can be left out or set to a default, 
// I used them as a test to see the difference when the event hook is used.  
    $("#rezervuj").colorbox({ 
    iframe:true, 
    innerWidth:660, 
    innerHeight:720, 
    opacity: 0.6, 
    top: 0, 
    left: 0 
    }); 

// Use the "cbox_complete" event hook. 
// It allows the colorbox div to be positioned after it opens, 
// but before the content is loaded. 
$(document).bind('cbox_complete', function(){ 

// Grab the position of the button, 
// colorbox can be positioned relative to it. 
    var pos = $(rezervuj).position(); 
    //console.log(pos); 

    // Set the position of the colorbox div 
    // You can add to or subtract from the pos values 
    // Example: top: (pos.top + 20) + "px" 
    $("#colorbox").css({ 
     position: "absolute", 
     top: pos.top + "px", 
     left: pos.left + "px" 
    }).show(); 
}); 

}); 
</script> 

Answer 2

당신도 이것을 시도 할 수 있습니다.

$.colorbox({ 
       width: "600px", height: "500px", inline: false, overlayClose: false, escKey: true, iframe: true, 
       onComplete: function() { 
        $('#colorbox').removeAttr('top');//test 
        $('#colorbox').css('top', '100px');//test 
        $('#colorbox').removeAttr('display');//test 
        $('#colorbox').css('display', 'block');//test 
       }, 
       onLoad: function() { 
        $('#colorbox').removeAttr('display');//test 
        $('#colorbox').css('display', 'none');//test 
       }, 
      });