颜色框定位在另一个元素的顶部

Question

我在颜色框的定位方面遇到了相当大的问题。官网http://www.jacklmoore.com/colorbox/上描述的方法对我的目的来说还不够。问题是我有按钮打开颜色框，我需要将它定位在“按钮上方”（按钮高度为 50 像素，颜色框高度约为 700 像素，因此我需要将其居中于按钮上方（类似于按钮顶部的 300 像素） )。

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

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

它可以工作，但是颜色框设置会在 onOpen 或 onLoad 之后立即自动覆盖这些设置，并且颜色框再次位于视口的中心。

所以我基本上是在寻求帮助，顶部、左侧等颜色框定位设置根本不足以定位在按钮元素的顶部。

提前致谢！

编辑：完整代码如下

$(".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 上的链接：http://jsfiddle.net/zS8J8/8/（对 CSS 和 HTML 中的混乱代码感到抱歉）

Answer 1

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

这是在 Win 7 上的 firefox 20、chrome 26、IE 9 中测试的。“打开颜色框”链接在使用 HTML 的 IE 中不可见，但如果您在该区域移动鼠标，您会看到光标更改，如果您单击，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
                },
            });