位于另一个元素顶部的颜色盒定位

Colorbox positioning on top of another element

本文关键字：颜色 定位 顶部 另一个 元素      更新时间：2023-09-26

我有一个相当大的问题与定位的颜色盒。官方网站http://www.jacklmoore.com/colorbox/上描述的方法对我的目的来说还不够。问题是，我有一个按钮打开颜色盒，我需要把它放置在按钮上方(按钮的高度是50px，颜色盒的高度大约是700px，所以我需要把它放在按钮上方的中心(比如按钮顶部300px)。

我已经尝试了基本的重新定位与jquery在onOpen和onLoad函数在colorbox像:

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

它工作，但colorbox设置自动覆盖这些设置后onOpen或onLoad和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中混乱的代码)

jsfiddle很有帮助，我可以使用与您相同的代码并使其工作。

在firefox 20、chrome 26、ie9和win7上进行了测试。"打开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>

你也可以试试这个

$.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
                },
            });
相关文章：