2

プロジェクトでモーダルウィンドウを開くためにカラーボックスを使用しています。

カラーボックスを使用する5つのスタイルがあります。私はこのURLで例5を使用しています：http ：//www.jacklmoore.com/colorbox/example5/

colorbox.jsのキャプション行（タイトル属性テキスト、背景、閉じるアイコン）をボックスの上部に移動しようとしています。デフォルトでは下部になります。どうすればいいですか？

これは、例5のカラーボックスウィンドウの通常のビューです。

これは、例5のカラーボックスウィンドウの通常のビューです。

これは私が本当に望んでいることです：

これが私が本当に欲しいものです

4

5 に答える 5

10

あなたは2つのことをしなければなりません： 最初は簡単です。CSSファイル（colorbox.css）を編集し、次の要素の位置ルールを変更する必要があります。

#cboxTitle, #cboxCurrent, #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow

そのため、それらの絶対位置は、「bottom」プロパティではなく「top」プロパティに基づいています。編集の前後の例を次に示します（変更前のバージョンはコメント化されています）。

/*#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} */
  #cboxCurrent{position:absolute; top: 0; left:58px; font-weight:bold; color:#7C7C7C;}

'top'プロパティの適切な値を取得するには、実験する必要があります。

2番目に行うことはもっと難しいかもしれません。プラグインは、 controls.pngと呼ばれる画像「スプライト」（多くの画像の合成）を使用します。それを見ると、あなたがやりたいことをするのに必要な画像がありません。

画像エディタに精通している場合は、この画像を変更して必要な画像を追加し、CSSでの一般的なスプライトの使用に従って新しい画像コンテンツを使用するために必要なXY座標を決定できます。あなたがこれに賛成かどうかわからない。

ああ、でもあなたはそれが単純な変化だと思っていましたね？頑張ってください！

于 2012-05-05T06:22:40.057 に答える
5

colorbox.cssの下部にある下記のコードをコピーするだけです。

#colorbox #cboxClose { top: 0; right: 0; } #cboxLoadedContent{ margin-top:28px; margin-bottom:0; }

于 2013-08-15T00:11:21.623 に答える
1

colorbox.cssを編集します次の変更を行います


1. Replace 
#cboxLoadedContent{margin-bottom:28px;}
with 
#cboxLoadedContent{margin-top:28px;}

2. Replace
#cboxClose{position:absolute; bottom:0;
with
#cboxClose{position:absolute; top:0;
于 2015-08-06T11:44:56.047 に答える
0

画像の近くを変更する簡単な方法を見つけました。jquery.colorbox.jsで画像の「近く」という単語を変更してください。

current： "image {current} of {total}"、previous： "previous"、next： "next"、close： ""、// was "close" xhrError： "このコンテンツの読み込みに失敗しました。"、imgError： "この画像を読み込めませんでした。」、

于 2013-01-19T16:24:32.843 に答える
0

これを交換してください

       $content = $tag(div, "Content").append(
            $title = $tag(div, "Title"),
            $current = $tag(div, "Current"),
            $prev = $('<button type="button"/>').attr({id:prefix+'Previous'}),
            $next = $('<button type="button"/>').attr({id:prefix+'Next'}),
            $slideshow = $('<button type="button"/>').attr({id:prefix+'Slideshow'}),
            $loadingOverlay
        );

        $close = $('<button type="button"/>').attr({id:prefix+'Close'});

と

$content = $tag(div, "Content").append(
        //$title = $tag(div, "Title"),   // comment this line
        $current = $tag(div, "Current"),
        $prev = $('<button type="button"/>').attr({id:prefix+'Previous'}),
        $next = $('<button type="button"/>').attr({id:prefix+'Next'}),
        $slideshow = $('<button type="button"/>').attr({id:prefix+'Slideshow'}),
        $loadingOverlay
    );

    $close = $('<button type="button"/>').attr({id:prefix+'Close'});
    // add this new code
    $wrap  = $tag(div, "Wrapper").append(
            $title = $tag(div, "Title")
    );
于 2017-01-13T08:01:54.073 に答える