Question

我想在页面加载时在灯箱中显示隐藏div的内容。

如何使用color box执行此操作？

我不理解的是：

我需要使用他们的CSS文件吗？哪一个，它在哪里？

如何在页面加载时使灯箱亮起？

我试过这个但没有运气：

$(document).ready(function(){
    $("#div_id_i_want_to_show").colorbox({width:"50%", inline:true});
});

Answer 1

约瑟夫的回答是在正确的轨道上。我还必须在div显示之前使div可见（否则它只显示黑屏）。然后我必须在用户关闭灯箱后隐藏div。

注意：我还必须编辑css文件以指向我放置图像的目录。

这是我的最终代码：

$(document).ready(function(){
    $('#div_id_i_want_to_show').show();
    $.colorbox({'href':'#div_id_i_want_to_show', 'inline':true, 'width':'600px', 'height':'600px'});
    $(document).bind('cbox_closed', function(){
            $('#div_id_i_want_to_show').hide();
    });
});

Answer 2

您需要使用您想要的任何主题的ColorBox css文件。下载中包含5个。请参阅文件夹Example1，Example2，Example3，Example4，Example5。每个人都有一个css文件和一个带图像的文件夹。如果您愿意，也可以创建自己的自定义主题。

要在页面加载时打开ColorBox，您需要使用公共方法：$ .colorbox（）

工作示例：http://jsbin.com/uficu

在该示例中，我有html：<div id="content">Hello from JSBin</div>

公共方法：$ .colorbox（{href：'＃content'，open：true，inline：true}）

查看文档：{{3}}

Answer 3

尝试打开选项Olli。

$(".el").colorbox({open:true})

Answer 4

这是一个技巧。没有必要为此添加javascript（或挂钩colorbox close事件）。

jquery.colorbox将您的内联内容重新定位到它在html＆gt; body root下创建的结构，然后再显示它，并在关闭时将其移回。这是一个奇怪的行为IMO，但相应地利用并应用你的“隐藏规则”。

<style>
 #div_id_i_want_to_show { display: block; ...your other style rules... }
 #divParent #div_id_i_want_to_show { display: none; }
<style>
<div id='parent'><div id='div_id_i_want_to_show'>...

或者，反转规则并放置一个依赖于颜色框定义元素的“显示规则”。

<style>
 #div_id_i_want_to_show { display: none; ...your other style rules... }
 .colorbox #div_id_i_want_to_show { display: block; }
<style>
<div id='div_id_i_want_to_show'>...

哦，还有，另一个选择是将#div_id_i_want_to_show保存在.hiddenDiv包装器中。

<style>
 #div_id_i_want_to_show { ...your style rules... }
 .hiddenDiv { display: none; }
<style>
<div class='.hiddenDiv'><div id='div_id_i_want_to_show'>...

Answer 5

点击某个按钮emailPopup

<div class="emailUse">
    <a class="emailPopup" href="#emailPopup_content">Mail Me</a>
</div>

您想使用colorbox

打开一个id为emailPopup_content的弹出窗口

<div style='display: none'>
    <div id='emailPopup_content'>
    Hi user,
    Thank you!
    </div>
</div>

您需要做的就是将jQuery编写为：

$(document).ready(function() {
    $('.emailPopup').colorbox({inline:true, width:"380px",height:"410px"});
});

说明：jQuery隐藏的div emailPopup_content显示在href

下引用的弹出窗口中

不要忘记包括：

<head>
    <link rel="stylesheet" href="colorbox.css">
    <script src="jquery.min.js"></script>
    <script src="jquery.colorbox-min.js"></script>
</head>

http://www.jacklmoore.com/colorbox/jquery.colorbox.js http://www.jacklmoore.com/colorbox/example4/colorbox.css

如何使用灯箱插件颜色框？

5 个答案: