16

jQueryカラーボックスを使用してログインフォームをロードしています（ajax経由）。ただし、この小さな小さなボックスが数秒間表示された後、ロードしたい実際のコンテンツにフェードインします。したがって、Webサイトでいくつかのカラーボックスの例を観察した後、小さなボックスはプリロードボックスであると想定されていると確信しています。このボックスが完全に表示されないようにする方法はありますか？

CSSを微調整したり、すべての読み込みアイテムに設定したりするなど、ばかげたことを試しましたdisplay: noneが、機能しません。

ここに画像の説明を入力してください

CSSハックを避け、javascriptを変更してこの問題を解決したいと思います。 理想的には、ロードに長い時間がかかるものにはカラーボックスを使用しないので、ロードボックスが表示されないようにするための何らかの方法があります。

変更したカラーボックスのJavaScriptとCSSを使用して、jsfiddleで問題を再現しました。ajaxコンテンツはそこにロードされませんが、削除したい小さなボックスが引き続き表示されます：http: //jsfiddle.net/hPEXf/

前もって感謝します！

4

4 に答える 4

10

@ op1ekunColorBoxが言ったように、あなたの状況で役立つ2つのイベントがあります。

onOpen->ColorBoxが開き始める直前に発生するコールバック。

onComplete->ロードされたコンテンツが表示された直後に発生するコールバック。

どちらdisplay:noneかを使用してライトボックスを非表示にするか、$("#colorbox").hide()機能しないようです。そのためopacity、コンテンツが読み込まれる間、ライトボックスを非表示にしていました。これを実際に示すhttp://jsfiddle.net/fDd6v/2/をフォークして、jsfiddleを設定しました。使用されたコードは次のとおりです。

$(function(){
    $("#awesome-link").colorbox({
        onOpen: function(){
            $("#colorbox").css("opacity", 0);
        },
        onComplete: function(){
            $("#colorbox").css("opacity", 1);
        }
    });
});
于 2012-12-23T20:16:00.347 に答える
3

CSSで以下を変更しました-

#colorbox{border: 1px solid #ebebeb;}    
#cboxContent{background:#fff; overflow:hidden;padding: 20px;}

これに-

#colorbox{border: 0px solid #ebebeb;}
#cboxContent{background:#fff; overflow:hidden;padding: 0px; margin: 0px;}

そして、ボックスは、コンテンツを表示するために展開されるまで非表示になります。しかし、それがあなたの全体的なスタイルに悪影響を与えるかどうかはわかりません。フォームの余白を操作して、フォームの周囲に空白を入れることができるはずです。

http://jsfiddle.net/hPEXf/1/

于 2012-12-19T14:40:57.153 に答える
2

私は数日前に ColorBox を使用していたので、このトピックについてはかなり新鮮だと思います。組み込みのコールバックの使用を検討しましたか?

具体的onOpenにはonComplete？

Jay が言及したパディング ソリューションを使用する場合は、 でパディングを設定0し、 でonOpen目的の値に戻すことができますonComplete。

それはきれいな解決策のようです。

于 2012-12-23T19:31:43.300 に答える