Question

我在我的应用中使用Colorbox。我正在寻找的是，在页面上加载隐藏div（.box），当我点击链接时，它会打开（div.box）并显示它的标题（My Box）和样式。 / p>

<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>

这是我尝试过的。

<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>

上述解决方案无效。我在这里缺少什么？

更新1：

基于以下评论和答案，我只使用一行打开彩盒，但仍无法正常工作!!!

<script>
  $(document).ready(function () {
    $('.box').hide();
    $('.click').click(function () {
       $(".box").colorbox({ open: true });
     });
  });
</script>

更新2：

感谢@Franklin。他的解决方案是正确的。这是一个简单的Colorbox如何完成的例子。 http://codepen.io/egyamado/pen/Jnxvi

Answer 1

在点击功能中，你不能只是......

尝试添加div的#id

    $(".box").colorbox({href:"#id", inline:true});

或者

$("a.click").colorbox({href:"#id", inline:true});

为什么Colorbox不适用于点击事件？

1 个答案: