3

クリック時にカラーボックスに非表示の div を表示しようとしています

カラーボックス内に div を表示する方法がわかりません

divは非表示ですが、明らかにカラーボックス内に表示されたときに表示されるようにしたい

<div class="test">test</div> // on click

<div id="messageform" style="display: none;"> // show this in colorbox
TEST
</div>    



$('.test').click(function(){
$.colorbox({inline:true, width:"50%", open:true, href:"#messageform" }); 
});

これは、フォーム messageform が非表示になっていない場合にのみ機能しますが、カラーボックスをクリックして表示するにはどうすればよいですか?

4

2 に答える 2

12

messageform持つ divの内側をラップするかdisplay:none、クリック時に表示するように設定できます。

$('.test').click(function(){
  $('#messageform').show();
  $.colorbox({inline:true, width:"50%", open:true, href:"#messageform" }); 
});

これは、何も表示しないように設定されたコンテナーを使用したデモです: http://jsfiddle.net/fbenariac/4vuDC/

また、カラーボックスイベントを使用して表示/非表示にすることもできます: http://jsfiddle.net/lucuma/LK4tt/1/

$('.test').click(function(){

$.colorbox({inline:true, width:"50%", open:true, href:"#messageform",
            onClosed: function() {
                 $('#messageform').hide();
            },
            onOpen: function() {
                 $('#messageform').show();
            }
           }); 
});​
于 2012-06-09T21:25:15.907 に答える
1
  1. ポップアップで表示するベース div のオーバーレイを作成します。
  2. オーバーレイ表示にスタイルを追加:なし
  3. 次に、js を呼び出します。JS は popupoverlay にコンテンツをポップアップ表示します...

HTML

    <a id="openpopup" href="popup" class="button">Details</a>

    <div class="popupoverlay" style="display:none">
        <div id="popup">
         some content...
        </div>
    </div>

JS

    $("#openpopup").colorbox({
        inline:true, 
        href: "#popup",
        width:666,
    });
于 2016-07-21T10:35:30.237 に答える