3

カラーボックスの配置にかなりの問題があります。公式ウェブサイトhttp://www.jacklmoore.com/colorbox/に記載されている方法は、私の目的には十分ではありません。問題は、カラーボックスを開くボタンがあり、それを「ボタンの上」に配置する必要があることです(ボタンの高さは50px、カラーボックスの高さは約700pxなので、ボタンの中央に配置する必要があります(ボタンの上部300pxのようなもの) ）。

次のようなカラーボックスの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 の乱雑なコードについて申し訳ありません)

4

2 に答える 2

2

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>
于 2013-05-09T10:24:09.247 に答える