Colorbox定位在另一个元素之上

时间:2013-05-09 08:39:25

标签: javascript jquery configuration colorbox

我对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中的混乱代码感到抱歉)

2 个答案:

答案 0 :(得分:2)

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>

答案 1 :(得分:1)

你也可以试试这个。

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