我试图在点击
的彩色框中显示隐藏的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" });
});
这只适用于未隐藏表单messageform,但如何在colorbox中单击显示?
答案 0 :(得分:12)
您可以将messageform
打包到包含display:none
的div中,也可以将其设置为在点击时显示:
$('.test').click(function(){
$('#messageform').show();
$.colorbox({inline:true, width:"50%", open:true, href:"#messageform" });
});
这是一个带有容器的演示,该容器设置为none: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();
}
});
});
答案 1 :(得分:1)
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,
});