9

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

我怎样才能用彩盒做到这一点？

我不明白的是：

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

页面加载时如何使灯箱出现？

我试过这个但没有运气：

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

5 回答 5

8

jyoseph 的回答是正确的。我还必须让 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();
    });
});
于 2009-08-08T16:05:48.397 回答
5

您确实需要使用您想要的任何主题的 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})

查看文档：http ://colorpowered.com/colorbox/

于 2009-08-08T02:52:45.673 回答
0

这是一个技巧。不需要为此添加 javascript（或挂钩颜色框关闭事件）。

jquery.colorbox 在显示之前将您的内联内容重新定位到它从 html>body 根目录创建的结构中，并在关闭时将其移回。这是 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'>...
于 2010-11-22T19:02:34.977 回答
0

尝试打开选项 Olli。

$(".el").colorbox({open:true})
于 2009-11-28T18:30:04.880 回答
0

单击某个按钮时emailPopup

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

您想打开一些 idemailPopup_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

于 2015-09-29T12:23:01.397 回答