colorbox div不会显示

Question

我试图在点击时在彩色框中显示隐藏的div

我无法弄清楚如何在colorbox中显示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" }); 
});

这仅适用于未隐藏表单消息表单,但如何在彩色框中单击显示？

Answer 1

您可以将messageform内部包装为div,也display:none可以将其设置为单击时显示:

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

这是一个带有容器的演示,该容器设置为none:http://jsfiddle.net/fbenariac/4vuDC/

您还可以使用colorbox事件来显示/隐藏: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();
            }
           }); 
});?