Расположение цветных колодок поверх другого элемента

Question

У меня проблема с позиционированием colorbox. Методов, описанных на официальном сайте http://www.jacklmoore.com/colorbox/, недостаточно для моей цели. Дело в том, что у меня есть кнопка, открывающая colorbox, и мне нужно позиционировать ее «над кнопкой» (кнопка 50 пикселей высотой, colorbox - это примерно высота 700 пикселей, поэтому мне нужно центрировать ее над кнопкой (что-то вроде 300px верхней части кнопки .)

Я попытался основной репозицию с JQuery в функции OnOpen и OnLoad в ColorBox как:

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

Он работает, но настройки ColorBox автоматически перезаписывать эти настройки сразу после OnOpen или OnLoad и ColorBox расположен в центре в окне просмотра снова.

Так что я в основном призываю к помощи, colorbox параметры позиционирования, такие как верхний, левый и т. д., просто недостаточны для позиционирования поверх элемента кнопки.

Заранее благодарен!

Edit: Полный код ниже

$(".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; 


}); 

EDIT 2: ссылка на jsfiddle: http://jsfiddle.net/zS8J8/8/ (жаль грязный код в CSS и HTML)

Answer 1

jsfiddle был полезным, я был в состоянии используйте тот же код, что и вы, и получите его работу.

Это было протестировано в firefox 20, chrome 26, IE 9 в Win 7. Ссылка «Open Colorbox» не отображается в IE с использованием вашего HTML-кода, но если вы переместите мышь в эту область, вы увидите изменение курсора, и если вы нажмете, Colorbox откроется в правильном месте.

Вот HTML, я изменил class="rezervuj" к id="rezervuj", потому что мы манипуляция на одном элементе, а не кучу изображений:

<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> 

Вот сценарий, который вы можете поместить в голову:

<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 
       }, 
      });