[英]Why Colorbox doesn't work on click event?
I'm using Colorbox in my app. 我在我的应用程序中使用Colorbox 。 What I'm looking for is, on page load hide div (.box) and when I click on the link, it opens (div.box) and shows it's title (My Box) and style. 我要寻找的是页面加载时隐藏div(.box),当我单击链接时,它会打开(div.box)并显示其标题(“我的盒子”)和样式。
<div class="click" href="link">Click here!</div>
<div class="box" style="width:700; height:800;" title="My Box">
<p>Content goes here</p>
</div>
Here is what i have tried. 这是我尝试过的。
<script>
$(document).ready(function () {
$('.box').hide();
$('.click').click(function () {
open_colorbox(newWidth, newHeight, newTitle);
});
function open_colorbox(c_width, c_height, c_title) {
var options = {
width: c_width,
height: c_height,
title: c_title,
overlayClose: false
};
$.colorbox(options);
}
});
</script>
The above solution doesn't work. 上面的解决方案不起作用。 What am I missing here? 我在这里想念什么?
UPDATE 1: 更新1:
Based on the below comments and answer(s) I only use one line to open colorbox, but still not working!!! 根据以下评论和答案,我只用一行打开颜色框,但仍然无法正常工作!!!
<script>
$(document).ready(function () {
$('.box').hide();
$('.click').click(function () {
$(".box").colorbox({ open: true });
});
});
</script>
UPDATE 2: 更新2:
Thanks to @Franklin. 感谢@Franklin。 His solution is the correct one. 他的解决方案是正确的。 Here is an example of how simple Colorbox can be done. 这是一个如何完成Colorbox的示例。 http://codepen.io/egyamado/pen/Jnxvi http://codepen.io/egyamado/pen/Jnxvi
Inside your click function, can't you just do... 在点击功能中,您不能只是...
Try adding #id of the div 尝试添加div的#id
$(".box").colorbox({href:"#id", inline:true});
Or 要么
$("a.click").colorbox({href:"#id", inline:true});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.