Question

我对colorbox的定位存在很大问题。官方网站http://www.jacklmoore.com/colorbox/上描述的方法对我来说还不够。问题是我有按钮打开彩盒，我需要将其定位在“按钮上”（按钮高度为50px，彩盒大约是700px高度，所以我需要将它放在按钮上方（类似300px顶部的按钮））。

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

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

它可以工作，但是在onOpen或onLoad之后，colorbox设置会自动覆盖这些设置，而colorbox再次位于视口的中心。

所以我基本上都在寻求帮助，像top，left等颜色框定位设置根本不足以定位在按钮元素的顶部。

提前致谢！

编辑：完整代码

$(".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中看不到“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>

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

Colorbox定位在另一个元素之上

2 个答案: