Javascript 色盒定位在另一个元素的顶部

我对色盒的定位有很大的问题。官方网站上描述的方法对我来说还不够。问题是，我有一个打开颜色盒的按钮，我需要把它放在“按钮上方”（按钮的高度是50px，颜色盒的高度大约是700px，所以我需要把它放在按钮上方的中心位置（比如按钮顶部的300px）

我尝试过在onOpen中使用jquery进行基本的重新定位，在colorbox中使用onLoad函数，如：

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

它可以工作，但在onOpen或onLoad之后，colorbox设置会自动覆盖这些设置，并且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;


});

---

编辑2:jsfiddle上的链接：（对CSS和HTML中混乱的代码感到抱歉）

jsfiddle很有用，我能够使用与您相同的代码并使其正常工作

这在Win 7上的firefox 20、chrome 26、IE 9中进行了测试。使用HTML的IE中看不到“Open Colorbox”链接，但是如果你在该区域移动鼠标，你会看到光标发生变化，如果你单击，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>

$（文档）.ready（函数（）{
//我删除了设置为默认值的选项。
//顶部和左侧可以省略或设置为默认值，
//我将它们用作测试，以查看使用事件挂钩时的差异。
$（“#rezervuj”）.配色箱({
伊夫拉姆：是的，
内宽：660，
内高：720，
不透明度：0.6，
排名：0，
左：0
});
//使用“cbox_complete”事件挂钩。
//它允许在打开后定位colorbox div，
//但在加载内容之前。
$（document）.bind（'cbox_complete'，function（）{
//抓住按钮的位置，
//颜色框可以相对于它进行定位。
var pos=$（rezervuj）.position（）；
//控制台日志（pos）；
//设置颜色框div的位置
//您可以向pos值添加或减去pos值
//示例：顶部：（位置顶部+20）+“px”
$（“#颜色框”）.css({
位置：“绝对”，
顶部：位置顶部+“px”，
左：位置左+“px”
}).show（）；
});
});

您也可以试试这个

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

---

如何调用Colorbox？如果将其分配给元素，则应该能够定位外部容器元素。尝试将完整代码添加到问题中，以便人们能够更好地帮助您。我使用经过测试的解决方案更新了我的答案。@JanAlfrédRichter欢迎您，很高兴它对您有所帮助。传递

onComplete

函数帮助因为我需要对一页上的多个按钮执行此操作，所以我无法将

cbox\u complete

挂钩绑定到预设的元素id。谢谢！