Question

我正在尝试通过jQuery colorbox加载名为#submit-text-form的表单。但是，colorbox最终会加载原始链接所定位的整个页面。我按照说明here进行了操作，但仍在加载整页。关于我可能做错的任何想法？

$(function(){
$('#submit-link').colorbox({
opacity: 0.3,
transition: 'fade',
href: $("#submit-link").attr('href') + "#submit-text-form",
});
});

Answer 1

试试这个：

$(function(){
$('#submit-link').colorbox({
opacity: 0.3,
transition: 'fade',
href: $("#submit-link").attr('href') + " #submit-text-form",
});
})

选择器" #submit-text-form之前需要有一个空格。 Colorbox使用jQuery的load（）方法进行ajax处理，因此它的工作方式相同。

Answer 2

当您直接从浏览器打开应该在颜色框中显示的页面时，您应该只看到里面的页面。如果没有，仍然需要加载整个页面并显示其中的一部分，使用ajax获取数据，成功获取DOM选择器所需的部分，然后将其显示在颜色框内。

像这样：

$.get($("#submit-link").attr('href'), 
    function(response) {
        //Load the AJAX response into a jQuery variable
        var $html = $(response);
        //Get the portion which you need to show inside the colorbox
        $html.find('#submit-text-form').colorbox({ opacity: 0.3, transition: 'fade');
        //Append it to body. (I didn't use colorbox before.)
        $('body').append($html);
});

注意：我没有测试过，我之前没有使用过colorbox，但这是你想要的方式。

jQuery Colorbox：无法通过ajax加载单个ID（不是整页）

2 个答案: