9

ページが読み込まれたときに、非表示のdivの内容をライトボックスに表示したいと思います。

カラーボックスでこれを行うにはどうすればよいですか？

私が理解していないこと：

CSSファイルを使用する必要がありますか？どれ、どこにあるの？

ページが読み込まれたときにライトボックスを表示するにはどうすればよいですか？

私はこれを試しましたが、運がありませんでした：

$(document).ready(function(){
    $("#div_id_i_want_to_show").colorbox({width:"50%", inline:true});
});
4

5 に答える 5

8

jyosephの答えは正しい方向に進んでいました。また、divが表示される前に、divを表示する必要がありました（そうでない場合は、黒い画面が表示されます）。次に、ユーザーがライトボックスを閉じた後、divを非表示にする必要がありました。

注：また、画像を配置したディレクトリを指すようにcssファイルを編集する必要がありました。

これが私の最終的なコードです：

$(document).ready(function(){
    $('#div_id_i_want_to_show').show();
    $.colorbox({'href':'#div_id_i_want_to_show', 'inline':true, 'width':'600px', 'height':'600px'});
    $(document).bind('cbox_closed', function(){
            $('#div_id_i_want_to_show').hide();
    });
});
于 2009-08-08T16:05:48.397 に答える
5

必要なテーマのColorBoxcssファイルを使用する必要があります。ダウンロードには5つ含まれています。フォルダーExample1、Example2、Example3、Example4、Example5を参照してください。それぞれにcssファイルと画像付きのフォルダがあります。必要に応じて、独自のカスタムテーマを作成することもできます。

ページの読み込み時にColorBoxを開くには、パブリックメソッド$ .colorbox（）を使用する必要があります。

実例： http： //jsbin.com/uficu

その例では、htmlがあります。<div id="content">Hello from JSBin</div>

そしてパブリックメソッド：$。colorbox（{href：'#content'、open：true、inline：true}）

ドキュメントをチェックしてください：http：//colorpowered.com/colorbox/

于 2009-08-08T02:52:45.673 に答える
0

ここにトリックがあります。このためにJavaScriptを追加する（またはカラーボックスのクローズイベントをフックする）必要はありません。

jquery.colorboxは、インラインコンテンツを、表示する前にhtml> bodyルートから作成した構造に再配置し、閉じたときに元に戻します。これはIMOの奇妙な動作ですが、それに応じて「非表示ルール」を利用して適用してください。

<style>
 #div_id_i_want_to_show { display: block; ...your other style rules... }
 #divParent #div_id_i_want_to_show { display: none; }
<style>
<div id='parent'><div id='div_id_i_want_to_show'>...

または、ルールを反転して、カラーボックスで定義された要素に依存する「表示ルール」を配置します。

<style>
 #div_id_i_want_to_show { display: none; ...your other style rules... }
 .colorbox #div_id_i_want_to_show { display: block; }
<style>
<div id='div_id_i_want_to_show'>...

また、さらに別のオプションは、＃div_id_i_want_to_showを.hiddenDivラッパー内に保持することです。

<style>
 #div_id_i_want_to_show { ...your style rules... }
 .hiddenDiv { display: none; }
<style>
<div class='.hiddenDiv'><div id='div_id_i_want_to_show'>...
于 2010-11-22T19:02:34.977 に答える
0

オープンオプションOlliを試してください。

$(".el").colorbox({open:true})
于 2009-11-28T18:30:04.880 に答える
0

いくつかのボタンをクリックするとemailPopup

<div class="emailUse">
    <a class="emailPopup" href="#emailPopup_content">Mail Me</a>
</div>

emailPopup_contentIDがカラーボックスを使用しているポップアップを開きたい

<div style='display: none'>
    <div id='emailPopup_content'>
    Hi user,
    Thank you!
    </div>
</div>

あなたがする必要があるのは、jQueryを次のように書くことです：

$(document).ready(function() {
    $('.emailPopup').colorbox({inline:true, width:"380px",height:"410px"});
});

説明：jQueryのhidden div emailPopup_contentは、hrefで参照されているようにポップアップに表示されます

含めることを忘れないでください：

<head>
    <link rel="stylesheet" href="colorbox.css">
    <script src="jquery.min.js"></script>
    <script src="jquery.colorbox-min.js"></script>
</head>

http://www.jacklmoore.com/colorbox/jquery.colorbox.js http://www.jacklmoore.com/colorbox/example4/colorbox.css

于 2015-09-29T12:23:01.397 に答える