colorbox div不会显示

时间:2012-06-09 21:19:57

标签: jquery ajax colorbox

我试图在点击

的彩色框中显示隐藏的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中单击显示?

2 个答案:

答案 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)

  1. 为您想要在弹出窗口中看到的基础div创建叠加层。
  2. 添加样式到叠加显示:无
  3. 然后打电话给你的js。 JS将在popupoverlay中弹出内容......
  4. 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,
        });