jQuery - 颜色框问题

Question

我有一个页面，我通过 jsp 包含一个标题页。我遇到的问题是两个页面（header.jsp 和主页）jquery.colorbox.js。就目前而言，我将它放在主页上，而不是在 header.jsp 上。当我在两个页面上都有它时，它会弄乱主页上弹出的颜色框。当它只在一个或其他页面上时，两个颜色框都可以工作，直到我在主页上打开一个。打开主页颜色框后，不再出现 header.jsp 的对话框。

这里是 header.jsp 的代码：

$('#logout_dialog').dialog({
                autoOpen: false,
                width: 600,
                buttons: {
                    "Yes": function() { 
                        $(this).dialog("close", logoutCheck()); 
                    }, 
                    "No": function() { 
                        $(this).dialog("close"); 
                    } 
                }
            });
            // Dialog Link
            $('#logout').click(function(){
                $('#logout_dialog').dialog('open');
                return false;
            });

这是主页的代码：

$("a[rel='import']").colorbox({opacity:.35});

<a rel="import" href="importBasicSearch.html" >Import File</a>

知道为什么会这样吗？

**编辑*****

我注意到，当我首先单击导入时，我在控制台中看到了这个错误：

$.colorbox 不是函数 [打破这个错误] $.colorbox({href:"skuDetails.html...:true, width:"75%", height:"75%"});

但只要我不点击导入，其他所有的都可以正常工作。

*编辑***

实际上我只是注意到，每当我单击导入并关闭颜色框时，它将不再让我从主页执行一些其他 jquery 函数。它似乎仍在 importBasicSearch.html 页面上寻找功能。

有什么想法吗？

Answer 1

我无法完全理解您的情况，但听起来您正在抛出 JS 错误，这会阻止其他 JS 执行。我的猜测是，您使用 colorbox 打开的链接应该使用 iframe 进行沙盒处理。我假设您正在加载一个带有颜色框的完整 HTML 文档，并且该文档中的脚本与您已经运行的脚本发生冲突。尝试使用 iframe：

$("a[rel='import']").colorbox({opacity:.35, iframe:true, width:500, height:500});