`
wxinpeng
  • 浏览: 590971 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

colorbox的常见问题

阅读更多

发现colorbox官方网站的troubleshoot写的比较好,转载一下。

1,flash覆盖colorbox:

This is not a ColorBox specific problem, by default Flash will overlay any HTML content. This can be prevented by setting the ‘wmode’ param and embed attribute to ‘transparent’.
这不是colorbox本身的问题,flash默认会覆盖所有的HTML内容,你可以设置wmode参数为transparent来避免这个问题。

2,colorbox在ie中的位置和行为异常:

这有可能是doctype(DTD)问题。colorbox需要有个有效的DTD声明,否则浏览器会以怪异模式(quirks mode,在标准模式中,浏览器根据W3C所定的规范来显示页面;而在怪异模式中,页面将以IE5,甚至IE4的显示页面的方式来表现,以保持以前的网 页能正常显示)呈现网页内容。务必使用正确的DTD声明来确保浏览器以标准模式呈现网页。
下面这段声明会将IE浏览器设定成怪异模式

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
 
这段带有URI的声明可以将所有浏览器设定到标准模式
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
 

3,colorbox的位置和行为异常(不区分浏览器):

这可能是源文件引用顺序错误导致的。JQuery和colorbox.css必须在jquery.colorbox.js之前引入,并且应该在JQuery的ready方法中调用colorbox,并且此调用要在引入jquery.colorbox.js之后

4,用colorbox显示外部文档时显示不正确:

这是由于没有将iframe参数设为true。默认的方式只能正确显示可以在body标签中存在的内容。

如果你想显示一个完整的html文档(包括<html>、<head>和<body>等标签),那么要是用iframe参数。并且要设定高度和宽度,因为colorbox无法得知位于iframe内的网页内容的宽高。

另外,如果你想载入一段位于相同域名下的另一个文档的部分内容,可以使用下面的方法

$(‘#example’).colorbox({href:”document.html div#content”});
 
5,在ie中colorbox的边框不显示:

colorbox中提供的例子中有些使用了png图片的透明度效果。IE6不支持alpha透明度,并且在IE7和IE8中也会出现黑底的效果。colorbox使用IE的css滤镜解决了这个问题,你可以再colorbox.css文件中看到这些代码。在例子中使用了相对路径,但用户将colorbox应用到自己的网站时经常更改image文件夹相对于css的路径。滤镜的路径也需要有相应的变动。请看下面的例子,假设你的images文件夹位于根目录下。

在css文件中使用了错误的相对路径:

.AlphaImageLoader(src=images/internet_explorer/borderTopLeft.png
 

正确的路径:

.AlphaImageLoader(src=/images/internet_explorer/borderTopLeft.png
 

正确的绝对路径:

.AlphaImageLoader(src=http://your_domain.com/images/internet_explorer/borderTopLeft.png
 

6,尝试载入外部页面却获得”Request unsuccessful”的报错信息

这可能是因为你尝试载入一个无效的URL或者ajax的方式载入其他域名下的文件。由于浏览器的限制,ajax方式必须载入与其在同一域名下的文件。并且ajax需要有服务器支持,如果本地测试必须安装apache服务。

7,如何通过rel属性关闭colorbox的群组功能

$(‘a[rel="examples"]‘).colorbox({rel:’nofollow’});
 

8,JavaScript/jQuery 在colorbox中不工作
这多数是因为在元素还没有载入到文档中时就尝试访问它,解决的方法是将这些js代码应道到colorbox的onComplete调用中。

例如: (使用 jQuery Forms 插件:

$(‘#login_window’).colorbox({onComplete:function(){
$(‘form#login’).ajaxForm();
}});
 
9,在iframe外面打开colorbox

任何在iframe中打开的内容都会被限制在iframe中,除非你将colorbox放到它的上一级窗口中。你可以从iframe中返回parent窗口打开colorbox。

Example:
<a href=’login.php’ onclick=’parent.$.fn.colorbox({href:”login.php”}); return false;’>Open from parent</a>
 

这种方法不能用于group方式,因为parent文档无法访问iframe里的内容,也就无法访问内部元素的rel属性。

分享到:
评论
2 楼 liuweihug 2014-07-27  
jquery简单实用弹出框控件-Colorbox事件例子 - 前端编程 - IT工作生活这点事。Just Such So!
http://www.suchso.com/UIweb/jquery-plug-use-Colorbox_9268.html
1 楼 supben 2010-12-11  
加入iframe有个文本输入框,我打开遮罩,输入文字。
然后关闭,在打开,文字就不见了。
能不能做到内容一致呢?

相关推荐

    jquery-colorbox jquery-colorbox

    下面,我们将深入探讨jQuery Colorbox的核心概念、使用方法及常见应用场景。 一、jQuery Colorbox基础 1. 安装与引入 要使用jQuery Colorbox,首先需要在项目中引入jQuery库和Colorbox的CSS与JS文件。一般而言,将...

    ColorBox样式例子

    `href`选项用一个函数返回每个链接的URL,这是处理动态内容的常见方法。 ColorBox还支持多种类型的媒体,如图片、iframe、HTML内容甚至Ajax请求。例如,如果你想在ColorBox中加载一个内联HTML元素,可以这样设置: ...

    图片预览效果(colorBox)

    colorBox,作为一个优秀的JavaScript插件,正是解决这一问题的利器。本文将深入探讨colorBox的功能、原理以及如何在实际项目中应用。 colorBox是一款基于jQuery库的弹出层插件,它的主要功能是提供美观、可定制的...

    jquery colorbox

    其他常见选项包括`width`、`height`、`opacity`、`iframe`(用于打开外部页面)等。 **4. 内容类型** ColorBox不仅支持图片,还可以处理多种内容类型,如HTML、iFrame、inline(页面内嵌内容)和ajax(异步加载...

    Colorbox - a jQuery lightbox

    此外,FAQ 部分还提供了如何寻求帮助的方法、常见问题解决方案以及一些示例。 总的来说,Colorbox 是一个功能强大且易于使用的 jQuery 插件,无论是初学者还是有经验的开发人员都可以轻松掌握其用法,从而为网站...

    jquery colorbox遮罩的使用

    5. **常见问题与解决方案** - **与其他插件冲突**:如果 Colorbox 和其他弹出插件一起使用,可能会有冲突。尝试调整加载顺序,或使用 `$.noConflict()` 解决。 - **样式覆盖**:如果你的项目已有定制的 CSS,可能...

    jquery弹出框插件colorBox

    在网页开发中,弹出框是常见的交互元素,用于显示额外的信息或进行用户交互。jQuery ColorBox是一款高效且可高度定制的弹出框插件,它提供了丰富的功能,使开发者能够轻松创建各种类型的弹出效果,如图片画廊、...

    ColorBox.rar_OpenGL_C/C++_

    C/C++是OpenGL编程的常见选择,因为它们提供了低级别的内存管理和性能优化的可能性。在"ColorBox.cpp"和"ColorBox.h"文件中,你可能会找到OpenGL函数调用、对象定义、函数声明以及与OpenGL交互的类或结构体。 3. *...

    带遮罩层弹出框展示图片插件

    这种设计常见于相册或图片库应用,提供了一种优雅的方式来展示和交互图片。 【描述】"相册播放 弹出层对照片进行选择查看"是指该插件支持像相册一样播放图片,并且在弹出层中让用户能够选择和查看不同的照片。它...

    colorboxDIV弹出层

    在网页设计和开发中,"colorboxDIV弹出层"是一种常见的交互元素,它用于创建一个浮动在页面主要内容上方的窗口,通常用来展示详细信息、图片、视频或任何其他需要突出显示的内容。Colorbox是一款流行的JavaScript...

    灯箱效果插件

    "灯箱效果插件"是一种常见的网页设计元素,主要用于在网页上展示图片、视频或任何其他内容时,提供一种沉浸式的用户体验。这种效果通常会在用户点击一个缩略图或链接后,以全屏或者半屏的弹出窗口形式显示内容,背景...

    jquery弹出层插件

    DOM Window,尽管在jQuery插件中不常见,但它是创建弹出层的一种方式。它允许用户在页面上打开一个浮动的、可定制的窗口,可以包含任何HTML内容。DOM Window通常通过创建一个新的DOM元素并应用样式来实现,然后使用...

    README.md database coding

    - **版本 1.3.19**:解决了使用 `fixed` 属性时出现的问题,优化了初始化过程,去除了对 $.browser 的依赖。 - **版本 1.3.18**:修复了 Flash 内容在浏览器窗口调整大小时重新加载的问题,增强了安全性,改进了示例...

    弹出窗口_总样式

    在IT界,弹出窗口是一种常见的用户界面设计元素,它用于显示额外的信息或者与用户进行交互。"弹出窗口_总样式"这个标题暗示我们将会探讨弹出窗口的各种设计风格和实现方法。在这个主题下,我们将深入理解弹出窗口的...

    Jquery特效实例

    faq.zip和demo.zip可能包含了实现这类层弹出效果的示例代码和常见问题解答。 总的来说,"Jquery特效实例"这个主题涉及了网页开发中的关键组件,通过学习和实践这些实例,开发者可以提升其在网页交互设计上的技能,...

    回发事件在jquery中不起作用弹出ASP.NET

    标题中的“回发事件在jquery中不起作用弹出ASP.NET”和描述中的“回发事件在ASP.NET中不起作用Colorbox”共同指出一个问题:在使用jQuery弹出窗口(可能是Colorbox插件)时,ASP.NET的回发事件无法正常工作。...

    Visual C++基础实践训练2(2)

    颜色下拉框是许多图形用户界面应用中常见的一种元素,它允许用户从预定义的颜色集合中选择一种颜色。在Visual C++中,我们通常会使用`CColorDialog`类来实现这一功能,配合`CComboBox`控件以创建具有颜色选择功能的...

    宽屏大气旅行网站模板是一款html5单页网站模板下载.rar

    6. fontawesome-webfont.eot、glyphicons-halflings-regular.eot:这些是字体文件,用于在网页中显示图标,Font Awesome和Glyphicons是常见的图标集。 7. index.html:网站的主入口文件,包含整个页面的HTML结构和...

    AllComponents.ZIP

    3. **TransBtn_&_ColorBox.txt**:这个文件涉及的是可变透明度按钮(TransBtn)和颜色选择器(ColorBox)组件,这两种组件常用于用户界面,提供自定义颜色选择和按钮视觉效果。 4. **Banner.ZIP**:这可能是一个...

    Jquery模态窗口

    在Web开发中,模态窗口(Modal Window)是一种常见的交互设计元素,用于在用户与主页面交互时展示额外信息或进行特定操作,而不会离开当前页面。jQuery,作为一款轻量级、功能丰富的JavaScript库,提供了多种实现...

Global site tag (gtag.js) - Google Analytics