colorbox div不会显示答案

【问题标题】：colorbox div won't displaycolorbox div不会显示
【发布时间】：2012-06-13 10:43:19
【问题描述】：

我试图在点击时在颜色框中显示一个隐藏的 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" }); 
});

这仅在表单消息表单未隐藏时有效，但如何在颜色框中单击时显示？

【问题讨论】：

标签： jquery ajax colorbox

【解决方案1】：

您可以将 messageform 包装在具有 display:none 的 div 中，也可以将其设置为在点击时显示：

$('.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();
            }
           }); 
});

【讨论】：

非常感谢.. 快速提问我打算通过彩盒中的 ajax 提交此表单，成功后如何关闭彩盒
当然在ajax的success事件中你可以关闭它：$.fn.colorbox.close();
我建议使用onCleanup 而不是onClosed。在某些情况下（如果将messageForm 放在div 和display: none 中），颜色框的内容会在几秒钟内飞溅到页面中并隐藏。使用清理，我们确保它会在 colorbox 关闭之前被隐藏。

【解决方案2】：

为您希望在弹出窗口中看到的基本 div 制作叠加层。
为叠加显示添加样式：无
然后调用你的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>

    $("#openpopup").colorbox({
        inline:true, 
        href: "#popup",
        width:666,
    });

【讨论】：

这是更好的答案。