Question

是否可以在单击触发彩色框的实际按钮时指定colorbox的目标URL。

目前我在我的文档绑定函数中有这个：

$(function () {
    $(".button").colorbox({ width: "50%", height: "50%%", iframe: true, href: "/abc", opacity: 0.6 });
});

但是，href属性取决于我第一次将colorbox绑定到按钮时我不知道的下拉列表的值。

Answer 1

正如Colorbox Docs

中所述

你可以设置回调“onOpen”（以及“onLoad”），这应该在colorbox开始加载目标中指定的内容之前触发，让你有机会修改它

$(function () {
    $(".button").colorbox({ 
        width: "50%", 
        height: "50%%", 
        iframe: true, 
        href: "/abc", 
        opacity: 0.6,
        onOpen: function(){
          // modify target here
        }
    });
});

<强>更新可能更简单的解决方案 - colorbox允许使用函数而不是静态值

$(function () {
    $(".button").colorbox({ 
        width: "50%", 
        height: "50%", 
        iframe: true, 
        href: function(){
            // Since I can't see your markup I can't provide exact solution
            // but if your .button elm is an anchor then use
            var url = $(this).attr('href');
            // if you are obtaining the url from diff. elm, grab it from there
            // such as $('#your_element).attr('href') 
            return url;
        }, 
        opacity: 0.6
    });
});

Answer 2

你可以这样做......这种方法绕过了插件的自动onClick处理。在确定要使用的href值后，可以在自己的事件中调用插件。

在下面的代码段中，var myHref 是静态的，但您可以编写一些js 来从数据源设置它。

顺便说一句，我认为你的高度属性有错误 - 重复％标志??

<script>
        $(document).ready(function(){
            $('.button').click( function() {
                var myHref = "/someHREF";
                $.colorbox({
                    width: "50%", 
                    height: "50%", 
                    iframe: true, 
                    href: myHref, 
                    opacity: 0.6
                });             
            });
        });             
</script>

触发colorbox时指定colorbox的href属性

2 个答案: