0

デフォルトでは、カラーボックスは画面の垂直方向と水平方向の両方で中央に表示されます。それを変更する方法はありますか。たとえば、次のようなものがあります。

1)フー 2)バー 2)バー 3)モア 4)フーバー 5)バーフー

ユーザーが foo をクリックすると、カラーボックスが left:20%, top:-200px; で表示されるようになりました。ユーザーがバーをクリックすると、カラーボックスを同じ上部位置(-200px)で表示したいのですが、今回は左に50%、さらにクリックすると左に60%、foobarは左に70%になります等々。各要素にクラスを設定し、そのすべてに対してcssを実行することなく、どうすればこれを達成できますか? ありがとう

4

2 に答える 2

0

配置設定を使用する

$('a#foo').colorbox({top:'-200px', left:'20%'});
$('a#bar').colorbox({top:'300px', left:'40%'});

私はこのようなものを推測しています; テストはしていませんが、正しい方向に進むことを願っています

 var topposition = '220';
 var leftposition = '10';
 $('a#bar').colorbox({top: topposition+'px', left:leftposition+'px', onComplete: function () {
    topposition = ($('#colorbox').offset().top) + 50;
    leftposition = ($('#colorbox').offset().left) + 10;
}});

このフィドルを見て、実際の動作を確認してください http://jsfiddle.net/4tkf5/13/

于 2013-03-28T16:27:50.727 に答える
0

ドロップダウンメニューのようなことをしようとしているようです。カラー ボックス項目がメニュー項目内にある限り、CSS を使用して必要な場所にすべてを配置できます。

メニュー項目は相対的な位置であり、カラーボックスの位置は絶対的である必要があります.1つのクラスだけを使用してそれらを移動し、同じクラスでも表示および非表示にすることができます.

それが役立つことを願っています

于 2013-03-28T16:48:36.297 に答える