Question

我在尝试使用colorbox jquery插件时遇到了一个有趣的事件。

首先，为了确保我正确使用插件，我创建了一个加载div内联的测试页面并且它有效。

接下来，我将此代码迁移到我的网站，发现了一些奇怪的显示。

首先我需要解释一下我是如何加载html的：

我有一个带有导航按钮的主index.htm页面。每个执行一个jquery .load（），它在内容div中加载另一个html页面。加载到内容div中的html具有颜色框代码和加载到颜色框中的div。

Sample .load() used in nav button in index.htm:

//loads home.htm into contentdiv inside index.htm
$(document).ready(function () {
    $("#btHome").click(function (event) {
        $('#contentregion').load('home.htm');
    });

    return false;
});

当我从这个嵌入式html页面（home.htm）中调用颜色框功能时，我什么也看不见。我知道加载了颜色框，因为我无法点击整个页面上任何位置的任何按钮或链接。

//function to load colorbox inline
$(document).ready(function () {
    $(".HomeAccreditations").colorbox({ transition: "fade", speed: 500, overlayClose:         false, inline: true, href: "#AccredPopup", height: "500px", width: "500px"});
});

接下来我尝试了以下内容。我按照前面的描述加载了index.html页面，然后使用导航按钮导航到不同的嵌入式html。

接下来，我通过导航按钮返回index.html。令我惊讶的是，彩盒模式现在现在显示但是我无法点击盒子上的任何地方，因为它只是显示为仅显示模态形式。

Answer 1

你可以成功使用它：

$.colorbox({ transition: "fade", speed: 500, overlayClose: false, inline: true, href: "#AccredPopup", height: "500px", width: "500px"});

嵌入式html中的Colorbox使用jquery .load（）奇怪的行为

1 个答案: